title: How to place two paragraphs side by side (next to each other)?
body: <p>I have two div containers wrapped by a parent div. Each child div contains paragraph with header. If I try to align thsese two paragraphs (including header) next to each other in the same row, they don't stay. They just break down and sit one underneath other. 
  <strong>How do I keep them next to each other , and also the same margin from the top?</strong></p>
  
  <p>NB I always want to keep the same amount of text as it shows in the demo in my first paragraph.</p>
  
  <p>HTML:</p>
  
  <pre><code>    &lt;div id="gallery-text"&gt;
  
      &lt;div id="gallery-text-left" style="float:left"&gt;
      &lt;p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"&gt;&lt;b&gt;I am not interested in shooting new things, I am interested to see things new.&lt;/b&gt;&lt;/p&gt;
  
      &lt;p id="gallery-paragraph-1" style="font-family:Georgia"&gt;
      bodybodybodybodybodybodybodybodybodybodybodybodybodybody
      bodybodybodybodybodybodybodybodybodybodybodybodybodybody
      bodybodybodybodybodybodybodybodybodybodybodybodybodybody
      &lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="gallery-text-right" style="float:left"&gt;
      &lt;p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"&gt;&lt;b&gt;External photo albums&lt;/b&gt;&lt;/p&gt;
      &lt;p id="gallery-paragraph-2" style="font-family:Georgia"&gt;
      &lt;a&gt;Link coming soon&lt;/a&gt;
      &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>.CSS:</p>
  
  <pre><code> #gallery-text-left{
  }
  #gallery-paragraph-1{
  border-left:8px solid #3CB371;
  border-radius:4px;
  padding-left:15px;
  }
  #gallery-paragraph-2{
  border-left:8px solid #3CB371;
  border-radius:4px;
  padding-left:15px;
  }
  #gallery-text-right{
  }
  </code></pre>
  
  <p>Please have a look on my <a href="http://jsfiddle.net/v48tbqxx/" rel="noreferrer">Demo.</a></p>