HTML Element Style How to - Stack two div on the right with single div on the left

Question

We would like to know how to stack two div on the right with single div on the left.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--from   www . j ava  2 s  .c o m-->
  display: flex;
  flex-flow: row wrap;
  height: 400px;
}

div {
  display: flex;
  flex: 1;
}

.wrapper {
  flex-flow: column wrap;
}

.b1 {
  background-color: green;
}

.b2 {
  background-color: yellow;
}

.b3 {
  background-color: pink;
}
</style>
</head>
<body>
<body>
  <div class="box b1">Box One</div>
  <div class="wrapper">
    <div class="box b2">Box Two</div>
    <div class="box b3">Box Three</div>
  </div>
</body>
</body>
</html>

The code above is rendered as follows: