title: How to ignore element height without float?
body: <p>Alright, so we have this markup:</p>
  
  <pre><code>&lt;div class="die-control"&gt;
    &lt;div class="symbol yellow"&gt;&lt;/div&gt;
    &lt;label for="yellow"&gt;yellow&lt;/label&gt;
    &lt;a class="quantity-control up" href="#"&gt;+&lt;/a&gt;
    &lt;input name="yellow"&gt;
    &lt;a class="quantity-control down" href="#"&gt;-&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;div class="die-control"&gt;
    &lt;div class="symbol green"&gt;&lt;/div&gt;
    &lt;label for="green"&gt;green&lt;/label&gt;
    &lt;a class="quantity-control up" href="#"&gt;+&lt;/a&gt;
    &lt;input name="green"&gt;
    &lt;a class="quantity-control down" href="#"&gt;-&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>.die-control {
     width: calc(100% / 3);
     float: left;
     margin-bottom: 10px;
  }
  
  .symbol.yellow {
    display: inline-block;
    position: relative;
    left: -7px;
    width: 30px;
    height: 18px;
    top: 5px;
    background-color: #E9D23F;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  
  .symbol.yellow::after {
    content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    top: -10px;
    border-bottom: 10px solid #E9D23F;
  }
  
  .symbol.green {
    display: inline-block;
    position: relative;
    left: -7px;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-bottom: 20px solid #4F6441;
    top: -5px;
  }
  
  .symbol.green::after {
     content: '';
     position: absolute;
     left: -15px;
     top: 20px;
     width: 0;
     height: 0;
     border: 15px solid transparent;
     border-top: 20px solid #4F6441;
   }
  </code></pre>
  
  <p>The symbol classes are different heights. So when the the <code>.control</code> elements are placed side by side, the <code>input</code> elements are not aligned horizontally. If I make the the <code>.symbol</code> elements <code>float: left;</code>, then their height is ignored and the <code>input</code> elements are aligned.  But, I don't want them to float left.</p>
  
  <p>Is there a way to achieve that effect without floating the symbols?</p>