JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div class="roditel">

      <div class="dochka"></div>
      <div class="float-1"></div>
      <div class="dochka-2"></div>
      <div class="float-2"></div>
      <div class="dochka-3"></div>

    </div>
  </body>

</html>

CSS

.roditel {
  background-color: lightblue;
  width: 350px;
  height: 450px;
  padding: 50px;
}

.dochka {
  background-color: green;
  width: 50px;
  height: 150px;
  border: 2px solid yellow;
}

.float-1 {
  background-color: pink;
  width: 25px;
  height: 100px;
  float: left;
  margin-left: 25px;
  margin-bottom: 25px;
}

.float-2 {
  background-color: brown;
  width: 100px;
  height: 25px;
  float: left;
}

.dochka-2 {
  background-color: blue;
  width: 150px;
  height: 50px;
  border: 2px solid yellow;
}

.dochka-3 {
  background-color: darkblue;
  width: 50px;
  height: 150px;
  border: 2px solid yellow;
  clear: left;
}