<div class="block">
<div class="flex">
<div class="title">111 111 111 111 111 11 111 111 111 111 111 111 111 111 111 111 111 11 111 111 111 111 111 111 </div>
<div class="description">111 111 111 111 111 11 111 111 111 111 111 111111 111 111 111 111 11 111 111 111 111 111 111</div>
<div class="date">111 111 111 111 111 11 111 111 111 111 111 111111 111 111 111 111 11 111 111 111 111 111 111</div>
</div>
<div class="icon"></div>
</div>
.block {
position: relative;
width: 400px;
height: 300px;
padding: 16px;
background: lightgreen;
.flex {
display: flex;
flex-direction: column;
height: 100%;
.title {
font-weight: bold;
}
.description {
flex-grow: 1;
margin-top: 20px;
}
}
.icon {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 80px;
background: darkblue;
border-radius: 50%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.