title: Display content in two columns (50% each), if content does not fit move column to next row and fill horizontal space
body: <p>In my project, I want to display content in two columns (50% each), if content does not fit in, then move column to next row and fill horizontal space. </p>
  
  <p>Here are two images to show what I mean.</p>
  
  <p>For short text, display it in two columns:</p>
  
  <p><a href="https://i.stack.imgur.com/z6E66.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/z6E66.png" alt="enter image description here"></a></p>
  
  <p>When the text does not fit anymore, ie either of the columns are above 50% width, move the 2nd column's content in the next row filling all available horizontal space. Somewhat like this :</p>
  
  <p><a href="https://i.stack.imgur.com/FvU3a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FvU3a.png" alt="enter image description here"></a></p>
  
  <p>Can this be done only with CSS?</p>