CSS forced wrap - html

Question

In the first picture, the circled areas are two inline-block div elements.
Currently when i make the browser window smaller the second div element jumps under the first one as expected.
What i want is to make the text inside the second div element to wrap when i make the window smaller and to keep the space under the first div element empty.

Answer 1

You could use Flexbox :)
div {
display: flex;
flex-flow: row wrap;
}
div>div:first-child {
display: flex;
flex-direction: column;
margin-right: 20px;
}
div>div>div:last-child {
background: orange;
}
div>div:last-child p {
margin: 0;
}
<div>
<div>
<div>#15</div>
<div>OPEN</div>
</div>
<div>
<p>TODO: add a destination for Hello, User hyperlink</p>
</div>
</div>
Example on Codepen

Answer 2

Thank for your answers. Finally i got the result i wanted with this:
<div id="big">
<div id="left">
<div>#15</div>
<div>OPEN</div>
</div>
<div id="right">
<p>TODO: add a destination for Hello, User hyperlink</p>
</div>
</div>
<style>
#big {
display: flex;
}
#left {
flex-shrink: 0;
width:100px;
display: flex;
flex-direction: column;
}
div, p {
margin:0;
}
</style>

Answer 3

It's simple, just add this CSS property:
word-wrap: break-word;
/* To break the text */
Also, you are not supposed to use inline-blocks for this purpose.
Instead, use flexbox or grid.
Example:
<section>
<div class="details">
</div>
<div class="description">
<p> Text </p>
</div>
</section>
section {
display: grid;
grid-template-columns: 250px 1fr;
}
.details {
grid-column: 1 / 2;
}
.description {
width: 100%;
grid-column: 2 / 3;
}
.description p {
word-wrap: break-word; /* Will break the text*/
}