title: HTML, CSS, Bootstrap - Two columns with centering
body: <p>I am trying to make a little website that should have two columns, and each column should have its content centered.</p>
  
  <p>However, I have noticed that the columns will follow the height of each other, and not act as individual columns. E.g. whenever I add content to one of the columns, the content of the other column will be moved to fit the height of that column.</p>
  
  <p>In the JSFiddle, you can see that the "Hello" on the right side is not completely centered; it has been moved up to stand in line with the first of three "Hello"'s on the left side. I would like it so, that whenever I add content to one column, it doesn't affect the other - so the "Hello" on the right side should ideally stay completely centered.</p>
  
  <p><code>JSFiddle</code>: <a href="https://jsfiddle.net/goupb2ch/1/" rel="nofollow noreferrer">https://jsfiddle.net/goupb2ch/1/</a></p>
  
  <p>I have worked on this for quite a while now. Any ideas? Thanks! </p>