Is there an easy way to ensure that .well elements have the same height and width, regardless of screen size?

Question

I have three elements .wellon my homepage, and I do not want to fill them with content to ensure that they will be displayed correctly on every screen. Ideally, I would like the CSS solution, which could indicate their height and width, to be consistent with each other, no matter what screen they are displayed on (and also that they drain correctly when the window is compressed.

/* CSS used here will be applied after bootstrap.css */	
#benefit-box-1 {
  padding-top: 1em;
  display: inline-block;
  text-align: center;
  float: left;
}

#benefit-box {
  padding-top: 1em;
  display: inline-block;
  text-align: center;
  float: left;
}

#benefit-box-3 {
  padding-top: 1em;
  display: inline-block;
  text-align: center;
  float: left;
}

#benefit-row-2 {
  margin-top: 1px;
}

.icon-div {
  display:inline-block;
  text-align: centre;
  vertical-align: bottom;
  width: 100%;
  height: 100%;
}

.icon-div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row" id="benefit-row">
    <div class="col-md-4" id="benefit-box-1">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-users fa-4x"></i>
          <h1>Collaborate in your sales meetings.</h1>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="benefit-box">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-map-signs fa-4x"></i>
          <h1>Direct your team to the best deals</h1>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="benefit-box-3">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-filter fa-4x"></i>
          <h1>Trust your pipeline forecast</h1>
        </div>
      </div>
    </div>
  </div>
  <div class="row" id="benefit-row-2">
    <div class="col-md-4" id="benefit-box-1">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-bullseye fa-4x"></i>
          <h1>Helps you target the right contacts</h1>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="benefit-box">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-graduation-cap fa-4x"></i>
          <h1>In-built sales training</h1>
        </div>
      </div>
    </div>
    <div class="col-md-4" id="benefit-box-3">
      <div class="well">
        <div class="icon-div">
          <i class="fa fa-line-chart fa-4x"></i>
          <h1>Smash your sales targets</h1>
        </div>
      </div>
    </div>
  </div>
</div>  		

Run codeHide result

I did bootply here: My attempts

Answer 1

, wells/bootstrap Flex. - , : Flex CSS-,

, - 33% , 50% 100% . .

, , ( ), , .