title: CSS: How to get a scrollable list of labels to be uniform in height
body: <p>I'm trying to obtain a scrollable list of labels that shows up in two columns.</p>
  
  <ol>
  <li>The size of the columns need to flex based on the containing div.</li>
  <li>The list should flow from left to right, then top to bottom. According to other SO posts, making it <code>display: inline</code> should work, but it doesn't seem to be the case.</li>
  <li>The words also need to wrap, which for some reason, in my attempt below, isn't working. After the dash, it's pushing the rest of the label to the next line, instead of continuing and then wrapping.</li>
  <li>The tricky part is, the <em>height</em> of each label needs to be uniform, and they should be equal to the height of the tallest label. As you can see in the demo, one label title may be very long, so the height of that label should determine the height of all the other ones. I have no idea how to even begin to do this in CSS.</li>
  </ol>
  
  <p>I have a modest attempt at this: <a href="http://jsfiddle.net/pdExf/860/" rel="nofollow noreferrer">http://jsfiddle.net/pdExf/860/</a>, but it's missing the requirements I need above.</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;label&gt;
          &lt;input type="checkbox"/&gt;
          &lt;span&gt; 1-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces &lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;
          &lt;input type="checkbox"/&gt;
          &lt;span&gt; 2-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces &lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;
          &lt;input type="checkbox"/&gt;
          &lt;span&gt; 3-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces &lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;
          &lt;input type="checkbox"/&gt;
          &lt;span&gt; 4-very_short_word &lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;
          &lt;input type="checkbox"/&gt;
          &lt;span&gt; 5-medium_length_word &lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;
          &lt;input type="checkbox"/&gt;
          &lt;span&gt; 6-still_no_spaces &lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;label&gt;
          &lt;input type="checkbox"/&gt;
          &lt;span&gt; 7-thisisaverrrrrrrrrrrrryyyyyy_long_word_with_no_spaces &lt;/span&gt;
        &lt;/label&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>span {
    margin-left: 14px;
    flex: 1 1 auto;
    overflow: 'hidden',
    word-wrap: break-word;
  }
  
  label {
    box-sizing: border-box;
    background: white;
    color: black;
    padding: 10px;
    margin: 10px 10px 20px 10px;
    display: flex;
    border: 1px solid black;
  }
  
  ul {
    display: flex,
    flex: 1 1 auto;
    flex-wrap: wrap;
    margin: 10px 0px 0px 10px;
    column-count: 2;
    column-gap: 20px;
  }
  
  div {
    height: 130px;
    background-color: lightblue;
    overflow: scroll;
  }
  
  li {
    display: inline; // want labels to display left-to-right
  }
  </code></pre>
  
  <p>What else should be added to make this work?</p>