How do I make these HTML blocks of info stay the same size?

Question

I am trying to make these blocks of info the same size regardless of the number of words each one holds. As seen in the example, when one block has less text than the other, one gets a bit smaller and the other remains a different size.

Now my question is, How do I achieve having these blocks the same size regardless of its content or image? I am also going to use another pair right below them.

Here is the CSS code:

 /***********All containers**************/
   .bottomContainers{
position: absolute;
margin-left: 0%;

display: inline-box;
  }

 /**********Small Containers*************/
  .container{
    max-width: 30%;
    max-height: 30%;
    margin-top:5%;
    margin-bottom: 5%;
    margin-left: 10%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 2%;
background-color: #ecf0f1;
color: grey;
display: inline-block;
/*display: inline-block;*/
border-radius: 5px;
border-bottom: 2px solid grey;
 }

Here is the HTML code:

    <div class="bottomContainers" role="moreInfo">
     <!--Small Inner Containers for Information-->
     <div class="container" id="firstContainer">
          <br />
          <center><img src="img/map.png"></center>
          <br>
          <article>
             Some random text is in this block, It doesnt size like the next one
          </article>
     </div>
     <div class="container" id="firstContainer">
        <br />
        <center><img src="img/money.png"></center>
        <br>
        this is another block which also doesnt scale to the other block regardless of text inside of it
     </div>

What did I possibly do wrong here ?

Answer 1

I am heavily refactoring your original code in this solution. If this is a static width website then having static width cells won't be a problem. If you want this solution to be responsive you will have a lot of issues with it:

http://jsfiddle.net/VET6x/1/

I positioned the image and its corresponding text using absolute. Again that will work with a static layout, once it goes responsive there will be problems.

<div class="bottomContainers">

    <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>
        <div>
            Some random text is in this block, It doesnt size like the next one
        </div>
     </div>

     <div class="container">
        <div>
            <img src="http://placekitten.com/g/80/80" />
        </div>     
        <div>
            This is another block which also doesnt scale to the other block regardless of text inside of it
        </div>
     </div>

</div>

.bottomContainers { overflow:hidden; }

.container { 
    width:200px;
    height:200px;

    float:left;
    position:relative;

    margin:5% 5%;
    padding:2%;

    background-color: #ecf0f1;
    color: grey;

    border-radius: 5px;
    border-bottom: 2px solid grey;
 }

.container > div { position:absolute; bottom:10px; }
.container > div:first-child { position:absolute; top:10px }

If it were me I would find someway to avoid static height cells.