title: How to get same height in display:table-cell
body: <p>I have 3 buttons and I want that to be of same height.Also I want that to be of same height in tab resolution as well.I want this to be achieved in css.</p>
  
  <p>Can anyone please tell me how can i achieve that.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="content"&gt;
      &lt;p&gt;It's easy to become a member. &lt;/p&gt;
      &lt;p&gt; Join today online    &lt;/p&gt;
      &lt;div class="btn-wrap"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col"&gt;&lt;a href=""&gt;Find Nearest Agent&lt;/a&gt;&lt;/div&gt;
              &lt;div class="col"&gt;&lt;a href="" &gt;Join Now&lt;/a&gt;&lt;/div&gt;
              &lt;div class="col"&gt;&lt;a href="" &gt;Download the App&lt;/a&gt; &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.content {
      width:75%; //there is a reason to use 75% here coz I have to place an image for remaining 25%.
  }
  
  .btn-wrap {
      display:table;
      border-collapse: separate;
      width:100%;
      overflow: hidden;
  }
  
  .row {
      display:table-row;
  }
  
  .col {
      display:table-cell;
      padding: 0 0.5% 0;
      width:32%;
      float: left;
  } 
  
  a {
      font-size: 20px;
  }
  
  input[type="submit"], a {
      border: 0 none;
      box-sizing: border-box;
      display: block;
      font-family: "Lato",Arial,sans-serif;
      font-size: 17px;
      font-style: normal;
      font-weight: 900;
      margin: 0;
      padding: 20px 10px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      background-color: #ff0;
      color: #1d6221
  }
  </code></pre>
  
  <p>JSFiddle:<a href="http://jsfiddle.net/qwdduc7z/5/" rel="nofollow">http://jsfiddle.net/qwdduc7z/5/</a></p>