title: How to align paragraphs horizontally in separate divs/spans?
body: <p>I have 2 divs (that I've placed side by side) that contain paragraphs (about 5 in each). I'd like for the paragraphs to be aligned horizontally side by side. What I mean is I'd want paragraph 2 in the first div to begin at the same line as paragraph 2 in the second div (and same for all other paragraphs). I tried using jquery ui's position function as I'm already using it's slider on my project as well (<a href="https://jqueryui.com/position/" rel="nofollow noreferrer">https://jqueryui.com/position/</a>) but when one of my paragraphs was too long and was not displaying in the window screen it didn't align it properly with its corresponding paragraph. Here is my html (by the way, I would like to avoid using a table because I have to replace my paragraphs later on periodically and it would be difficult change the text via my .js file if it's broken up too much):</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="column-1"&gt;
   &lt;p&gt;PARAGRAPH 1&lt;/p&gt;
   &lt;p&gt;PARAGRAPH 2&lt;/p&gt;
   &lt;p&gt;PARAGRAPH 3&lt;/p&gt;
   &lt;p&gt;PARAGRAPH 4&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="column-2"&gt;
   &lt;p&gt;PARAGRAPH 1&lt;/p&gt;
   &lt;p&gt;PARAGRAPH 2&lt;/p&gt;
   &lt;p&gt;PARAGRAPH 3&lt;/p&gt;
   &lt;p&gt;PARAGRAPH 4&lt;/p&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong> To clarify, the paragraphs in the divs are of varying lengths, that's really where my same-line alignment issue originates from.</p>