make 1 full container in left and half and half container in right

Question

same like above example but in each container have text in middle and make responsive as well. anybody can help?

flexbox vertically split container in HALF

Answer 1

Here something that can give you a start:

.container {
  display: flex;
  width: 100%;
  justify-content: center;
  height: 15em;
}

.row {
  width: 50%;
}

.left {
  background: red;
}

.right {
  background: yellow;
}

.right div {
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right div:nth-of-type(1) {
  background: blue;
}

<div class="container">
  <div class="row left">
    
  </div>
  <div class="row right">
    <div>
      Top
    </div>
    <div>
      Bottom
    </div>
  </div>
</div>

Codepen: https://codepen.io/anon/pen/Wdbrrz