How do I insert a vertical table display rectangles inside a horizontal table display rectangles using HTML and CSS?

I want to create a page where there are 3 rectangles (in black). The code show this. Now I want to create inside the 2nd horizontal rectangle, 3 vertical rectangles with different sizes(in red). Every and each text should be centered in each rectangle (vertically and horizontally).

How do I insert 3 columns inside the 2nd rectangle and centering all text in this:

<div class="wrap">
  <div class="row_wrap">
    <div class="head x">
      ONE
    </div>
  </div>
  <div class="row_wrap">
    <div class="middle x">
      TWO
    </div>
  </div>
  <div class="row_wrap">
    <div class="bottom x">
      THREE
    </div>
  </div>
</div>

body {font-size:36px; color:green;}
.wrap {display: table; width:100%;}
.row_wrap{display:table-row;}
.x{display:table-cell; vertical-align:middle; text-align:center;}
.head{height:200px; background:#fa4;}
.middle{height:400px; background:#4af;}
.bottom{height:100px; background:#a4f;}

Answers


I know this question is old, but it's interesting to know it's possible to solve this using flexbox.

.row, .column{
  display: flex;
}

.row{
  width: 100%;
  height: 10rem;
  border: 3px solid black;
  flex-flow:
}

.column{
  border:3px solid red;
  height: 100%;
  flex: 1;
}

.column--big{
  flex: 2;
}

.center{
  justify-content: center;
  align-items: center
}
<div class="row center">
  <span>Center</span>
</div>

<div class="row center">
  <div class="column center">
    <span>Center</span>
  </div>
  <div class="column column--big center">
    <span>Center</span>
  </div>
  <div class="column center">
    <span>Center</span>
  </div>
</div>

<div class="row center">
  <span>Center</span>
</div>

Need Your Help

Ajax load instances from a has_many association

javascript jquery ruby-on-rails ajax forms

I have a scenario where a Game has many Achievements. Setup as a todo app I have a form where users create a list of achievements they would like to complete. They first choose the game from and from

How do I declare this dll method in Delphi?

delphi dllimport

I have a function in a DLL (the c header is):