I have rows containing two flex divs each. One div displays an image, while the other has text. I'm puzzled as to why some divs display correctly while others have overflowing text.
Refreshing the page resolves this issue, but it resurfaces if I clear the cache. Any suggestions? Thank you 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>