1

I am using CSS-Grid layout and wondering how can I set the equal heights for panel-heading elements?

Specifically as in the row below I would like to have all country names section have same height, whereas, the TotalContacts section should be smaller in height.

enter image description here

CodePen

https://codepen.io/ghazanfarmir/pen/ddNBEZ

body {
  padding: 30px;
}

.countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}

.country .panel-heading {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="countries">
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/194/addresses" title="View Addresses">Abkhazia
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/1/addresses" title="View Addresses">Afghanistan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/258/addresses" title="View Addresses">Aland
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/2/addresses" title="View Addresses">Albania
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/3/addresses" title="View Addresses">Algeria
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/238/addresses" title="View Addresses">American Samoa
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/4/addresses" title="View Addresses">Andorra
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/5/addresses" title="View Addresses">Angola
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/223/addresses" title="View Addresses">Anguilla
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/6/addresses" title="View Addresses">Antigua and Barbuda
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/7/addresses" title="View Addresses">Argentina
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/8/addresses" title="View Addresses">Armenia
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/259/addresses" title="View Addresses">Aruba
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/262/addresses" title="View Addresses">Ascension
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/201/addresses" title="View Addresses">Ashmore and Cartier Islands
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/9/addresses" title="View Addresses">Australia
                                </a>
        </h4>
        <p>Total Addresses <strong>3</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>9</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/264/addresses" title="View Addresses">Australian Antarctic Territory
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/10/addresses" title="View Addresses">Austria
                                </a>
        </h4>
        <p>Total Addresses <strong>3</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/11/addresses" title="View Addresses">Azerbaijan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/12/addresses" title="View Addresses">Bahamas, The
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/13/addresses" title="View Addresses">Bahrain
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/239/addresses" title="View Addresses">Baker Island
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/14/addresses" title="View Addresses">Bangladesh
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/15/addresses" title="View Addresses">Barbados
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/16/addresses" title="View Addresses">Belarus
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/17/addresses" title="View Addresses">Belgium
                                </a>
        </h4>
        <p>Total Addresses <strong>1</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/18/addresses" title="View Addresses">Belize
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/19/addresses" title="View Addresses">Benin
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/224/addresses" title="View Addresses">Bermuda
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/20/addresses" title="View Addresses">Bhutan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
</div>
Ghazanfar Mir
  • 3,493
  • 2
  • 26
  • 42

1 Answers1

0

It may not be the effect you are looking for but making the country elements display:grid and setting rows to 1fr makes the two sections the same height

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  display:grid;
  grid-template-rows: repeat(2, 1fr);
}

enter image description here

body {
  padding: 30px;
}

.countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
}

.country .panel-heading {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>

<body>
  <div class="countries">
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/194/addresses" title="View Addresses">Abkhazia
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/1/addresses" title="View Addresses">Afghanistan
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/258/addresses" title="View Addresses">Aland
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/2/addresses" title="View Addresses">Albania
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/3/addresses" title="View Addresses">Algeria
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/238/addresses" title="View Addresses">American Samoa
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/4/addresses" title="View Addresses">Andorra
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/5/addresses" title="View Addresses">Angola
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/223/addresses" title="View Addresses">Anguilla
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/6/addresses" title="View Addresses">Antigua and Barbuda
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/7/addresses" title="View Addresses">Argentina
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/8/addresses" title="View Addresses">Armenia
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/259/addresses" title="View Addresses">Aruba
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/262/addresses" title="View Addresses">Ascension
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/201/addresses" title="View Addresses">Ashmore and Cartier Islands
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/9/addresses" title="View Addresses">Australia
                </a></h4>
          <p>Total Addresses <strong>3</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>9</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/264/addresses" title="View Addresses">Australian Antarctic Territory
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/10/addresses" title="View Addresses">Austria
                </a></h4>
          <p>Total Addresses <strong>3</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/11/addresses" title="View Addresses">Azerbaijan
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/12/addresses" title="View Addresses">Bahamas, The
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/13/addresses" title="View Addresses">Bahrain
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/239/addresses" title="View Addresses">Baker Island
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/14/addresses" title="View Addresses">Bangladesh
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/15/addresses" title="View Addresses">Barbados
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/16/addresses" title="View Addresses">Belarus
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/17/addresses" title="View Addresses">Belgium
                </a></h4>
          <p>Total Addresses <strong>1</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/18/addresses" title="View Addresses">Belize
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/19/addresses" title="View Addresses">Benin
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/224/addresses" title="View Addresses">Bermuda
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/20/addresses" title="View Addresses">Bhutan
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
  </div>
</body>

</html>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Thanks Paulie for helping. I am not happy with the height of Total Contacts section. This shouldn't be too big. – Ghazanfar Mir Feb 09 '18 at 15:11
  • Then you need to explain what it is you are trying to achieve...this did *exactly* what you asked for *before* any edit. – Paulie_D Feb 09 '18 at 15:14
  • If you are trying to equalise the heights of the top sections **only** there is NO CSS method for that...you will need javascript. – Paulie_D Feb 09 '18 at 15:15