Flex div not render correctly - css

Question

I've rows with two flex divs inside each one. In one div i show an image and inside the other there is text. I don't understand why some divs shows correctly but in others the text overflows.
If i reload the page this bug disappears but if i delete cache it comes again.
Any ideas? Thanks in advance.
.box {
position: relative;
}
.image-box-right, .image-box-left {
width: 50%;
}
.image-box-left {
float: left;
}
.image-box-right {
float: right;
}
.title {
font-size: 0.95em;
}
.text-box-right, .text-box-left {
background-color: #d53e73;
width: 55%;
height: 80%;
color: white;
box-sizing: border-box;
padding: 15px;
/* flex align items */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
position: absolute;
margin-top: 5%;
top: 0;
right: 0;
}
.text-box-left {
left: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row box">
<div class="col-12 px-0">
<img class="image-box-right" src="img/image1.jpg">
<div class="text-box-left dark">
<p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<a href="../shared/note.html"> MORE <i class="fa fa-arrow-right"
aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>
<div class="row box">
<div class="col-12 px-0">
<img class="image-box-left" src="img/image2.jpg">
<div class="text-box-right">
<p class="title"><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</span>
<a href="../shared/note.html">MORE <i class="fa fa-arrow-right"
aria-hidden="true"></i></a>
</p>
</div>
</div>
</div>

Answer 1

I don't think you need inline-block:
.notes-text-box-right, .notes-text-box-left {
background-color: #d53e73;
width: 55%;
height: 80%;
color: white;
box-sizing: border-box;
padding: 15px;
/* flex align items */
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
position: absolute;
margin-top: 5%;
top: 0;
right: 0;
}

Answer 2

You wrote two displaysettings in one CSS rule:
.notes-text-box-right, .notes-text-box-left {
[...]
display: flex;
[...]
display: inline-block;
[...]
}
The second one overwrites the first one, so you better erase that.