title: How to make other buttons on same div inherit the height size of a much bigger button?
body: <p>Using HTML with CSS.</p>
  
  <p>On a single div, I have three buttons each with different class (border style) coded in CSS. I made the buttons behave where their widths are fixed while the height changes size depending on the text length. </p>
  
  <p>The problem I have is, when one button change size (height), the other buttons does not follow or does not inherit the same height the div is adjusted too.</p>
  
  <p>Here is my code in HTML:</p>
  
  <pre><code>  &lt;div class="container-1020-Apx"&gt;
  
          &lt;button type="button" class="btn-styleLT"&gt;The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. &lt;/button&gt;
          &lt;button type="button" class="btn-styleCT"&gt; middle &lt;/button&gt;
          &lt;button type="button" class="btn-styleRT"&gt; right &lt;/button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is my code in CSS:</p>
  
  <pre><code> .container-1020-Apx {
      margin:auto;
      text-align: left;
      width:1020px;
      min-height: 30px;
      background-color: White;
      display:block;
   }
  
   .btn-styleLT{
      border : solid 2px #170417;
      border-radius : 20px 0px 0px 0px ;
      moz-border-radius : 0px 20px 0px 0px ;
      font-size : 16px;
      color : #f4f6f7;
      padding : 4px 18px;
      width: 422px;
      background : #000000;
      background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535));
      background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%);
      background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%);
      background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%);
      background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%);
      background : linear-gradient(top, #000000 0%, #1f3b08 100%);
      filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0 );
      min-height: 20px;
      max-height: inherit;
   }
  
   .btn-styleRT{
      border : solid 2px #170417;
      border-radius : 0px 20px 0px 0px ;
      ... &lt;almost same content&gt;
      min-height: 20px;
      max-height: inherit;
   }
  
   .btn-styleCT{
      border : solid 2px #170417;
      font-size : 16px;
      color : #f4f6f7;
      padding : 4px 18px;
      width:167px;
      background : #000000;
      ... &lt;almost same content&gt; 
      min-height: 20px;
      max-height: inherit;
   }
  
   .btn-styleLT:hover,
   .btn-styleLT:focus,
   .btn-styleLT:active,
   .btn-styleLT.active {
      color: #ffffff;
      background-color: #3276b1;
      border-color: #285e8e;
   }
  
   .btn-styleRT:hover,
    ... &lt;same&gt;
      border-color: #285e8e;
   }
  
   .btn-styleCT:hover,
   ... &lt;same&gt;
      border-color: #285e8e;
   }
  </code></pre>
  
  <p>Any ideas? I was thinking to provide individual div for each button, but if there is a work-around without doing so, that would be great.</p>