Adjusting Height of Panel Columns using CSS I am using panel-2col-brick to make a 2 x 2 information block. The HTML structure of the page is as follows  

&lt;div class="panel-display panel-2col-bricks clearfix"&gt;
  &lt;div class="panel-panel panel-col-top"&gt;
  &lt;div class="center-wrapper"&gt;
      &lt;div class="panel-panel panel-col-first"&gt;&lt;/div&gt;
      &lt;div class="panel-panel panel-col-last"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel-panel panel-col-middle"&gt;
  &lt;div class="center-wrapper"&gt;
      &lt;div class="panel-panel panel-col-first"&gt;&lt;/div&gt;
      &lt;div class="panel-panel panel-col-last"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


Now i need to change height of the second occurrence of panel-col-first and panel col-second. I have tried 

.panel-2col-bricks .center-wrapper .panel-col-first:first-of-type,
.panel-2col-bricks .center-wrapper .panel-col-last:first-of-type{
       height:80px;
       overflow:hidden;
}


However this changes  the height of both top-first and bottom-first columns. Is there any way i can adjust height of both rows separately ?
to achieve this you need make use of CSS pseudo selectors and apply them in the correct element, a good approach can be this:

.panel-2col-bricks &gt; .panel-panel:nth-child(2) .center-wrapper .panel-col-first,
.panel-2col-bricks &gt; .panel-panel:nth-child(2) .center-wrapper .panel-col-last


You can see this in action in the link below:
https://codepen.io/anon/pen/xBZGGb