Service Portal widgets equal height

[yundlu316]

I have a row in Service Portal with three columns, each holding a widget.   I want to make those columns the same exact size (height and width).   On the main page, I have the following CSS:

.wrap {

  display: flex;

  flex-wrap: wrap;

  flex-direction:row;

}

.wrap_item {

  text-align:center;

}

I applied the CSS class "wrap" to the row container and then applied class "wrap_item" to each of the columns.   The first widget is a Count widget and the content isn't as tall as the other two widgets.   I want the Count widget height to expand so it matches the other two widgets.   What am I missing in this code?

[Moedeb]

I used a combination of posts to set a height for the search widget as well as make it so it says Hi to the logged in user.

HTML:

<div>
    <div id="homepage-search" class="hidden-xs whatever">
    <h1 class="text-center font-thin hidden-xs text-4x m-b-lg sp-tagline-color">Hi {{::user.first_name}} {{options.title}}</h1>
   <h1 class="text-center text-4x m-b-lg sp-tagline-color" ng-bind="options.title"></h1>
   <h4 ng-if="options.short_description" class="text-center m-b-lg sp-tagline-color" ng-bind="options.short_description"></h4>
   <sp-widget widget="data.typeAheadSearch"/>
  </div>
</div>

CSS:

.sp-tagline-color {
 color: $sp-tagline-color;
}

.whatever {
    padding-bottom: 30px !this adds some of the background under the search field, add padding-top if you want to add size to the top;
}

Server Script:

data.typeAheadSearch = $sp.getWidget('typeahead-search', options.typeahead_search);

(function() {
   /* populate the 'data' object */
   /* e.g., data.table = $sp.getValue('table'); */

       data.sysUserID = gs.getUserID();
               if (!data.sysUserID)
                   data.sysUserID = gs.getUser().getID();
       var sysUserGR = new GlideRecord("sys_user");
       data.userExists = sysUserGR.get(data.sysUserID);
       if (data.userExists) {
               data.name = sysUserGR.getValue("first_name");
       } else {
               data.name = "User"
       }      
})();

I found this all very helpful, so thought I'd share as well.