Помогите разобраться с HTML CSS

Question

Мне нужно сделать 4 квадрата слева и прямоугольник справа, с квадратами я разобрался, а вот прямоугольник не получается

*{
    margin: 0;
}
.tools{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: flex-start;

}
.block{
    text-align: center;
    width:600px;
    height: 450px;
    background: darkgrey;
    color:red;
    border: 2px solid black;
    margin: 7px 7px 7px 7px;
}
.tools1{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: flex-start;

}



<div class="tools">
    <div class="block">1</div>
    <div class="block">2</div>
</div>
<div class="tools1">
    <div class="block">3</div>
    <div class="block">4</div>
</div>

Answer 1


<style>
*{
    margin: 0;
}
body {
  
}
.tools{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: flex-start;
    width: 250px;

}
.block{
    text-align: center;
    width: 100px;
    height: 80px;
    background: darkgrey;
    color:red;
    border: 2px solid black;
    margin: 7px 7px 7px 7px;
}
.tools1{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: flex-start;
    width: 250px;
}

.right {
  height: auto;
  width: 100px;
  margin-left: 0;
}

.main {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
}

.left {
  width: auto;
}
</style>


<div class="main">
  <div class="left">
    <div class="tools">
        <div class="block">1</div>
        <div class="block">2</div>
    </div>
    <div class="tools1">
        <div class="block">3</div>
        <div class="block">4</div>
    </div>
  </div>
  
  <div class="right block">RIGHT_BLOCK</div>
</div>

БЛОГ НА HUSL

Помогите разобраться с HTML CSS

Ответы (1 шт):