как разместить блоки как на картинке НЕ ИЗМЕНЯЯ HTMl ?
левый квадрат не хочет занимать 100% высоты, а занимает 100% ширины(так у меня получилось)
.last_request_wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.last_request_wrapper>* {
padding: 10px;
margin: 5px;
}
.last_request_container {
display: flex;
/* flex-wrap: wrap; */
background-color: blueviolet;
flex-direction: column;
}
.last_request_title {
text-align: left;
background: deepskyblue;
/* flex: 3 0px; */
/* order: 2; */
width: 56%;
display: flex;
flex-wrap: wrap;
place-self: flex-end;
}
.last_request_photo {
/* width: 64px; */
/* height: 64px; */
}
img {
width: 64px;
height: 64px;
}
.last_request_description {
background: lightgreen;
width: 50%;
display: flex;
place-self: flex-end;
}
<div class="last_request_wrapper">
<div class="last_request_container">
<div class="last_request_title">
last_request_title
</div>
<div class="last_request_photo">
<div>
<img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg"
alt="">
</div>
</div>
<div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta natus
voluptate
ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure, dolores non debitis
repellendus accusantium saepe mollitia. Id, quos.</div>
</div>
<div class="last_request_container">
<div class="last_request_title">
last_request_title
</div>
<div class="last_request_photo">
<div>
<img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg"
alt="">
</div>
</div>
<div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta natus
voluptate
ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure, dolores non
debitis
repellendus accusantium saepe mollitia. Id, quos.</div>
</div>
<div class="last_request_container">
<div class="last_request_title">
last_request_title
</div>
<div class="last_request_photo">
<div>
<img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg"
alt="">
</div>
</div>
<div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta
natus voluptate
ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto iure,
dolores non debitis
repellendus accusantium saepe mollitia. Id, quos.</div>
</div>
<div class="last_request_container">
<div class="last_request_title">
last_request_title
</div>
<div class="last_request_photo">
<div>
<img src="https://images.wallpapersden.com/image/download/hair-beard-situation_amdtbGuUmZqaraWkpJRobWllrWdpZWU.jpg"
alt="">
</div>
</div>
<div class="last_request_description">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Soluta natus voluptate
ducimus cum cumque. Similique animi aperiam dignissimos, expedita architecto
iure, dolores non debitis
repellendus accusantium saepe mollitia. Id, quos.</div>
</div>
</div>