title: How to achieve "clear" for bottom of div, not just left and right
body: <p>I'm displaying a list of links for voting, similar to <a href="http://news.ycombinator.com/" rel="nofollow noreferrer">Hacker News</a>.  I want the following layout for each link:</p>
  
  <p><img src="https://i.stack.imgur.com/hPmnu.gif" alt="enter image description here"></p>
  
  <p>The gray boxes highlight the four divs for each link listed.</p>
  
  <p><strong>The key thing I need to do is get the "other text" div to be left-aligned with the link headline text.</strong></p>
  
  <p>I could define the width of the rank and arrow divs (the two little boxes), of course, and then indent the other text div accordingly.  But this implementation has some downsides relative to my specific needs -- which I won't go into -- and more importantly, I just feel like there should be a more elegant way to achieve this.  Something like a clear bottom for the rank and arrow divs, or maybe a property of the link headline div that tells the following div to appear directly below it.</p>
  
  <p>Any ideas?</p>