Prevent inline-block element from moving to new line with text - html

Question

I am trying to create two, horizontally aligned boxes -- one with an image and the other with text. I have been able to configure the block with the image, but when I try to add text to the second block, it moves to a new line. Here is the html:
<div class = "First-Horizontal-Section">
<ul class = "First-Horizontal-Section-List">
<li class = "Image-One"></li>
<li class = "Text-Box-One"><p class = "Text-One"> This is some sample text. </p></li>
</ul>
</div>
And here is the CSS:
.First-Horizontal-Section-List {
font-family:'Times New Roman';
text-align: center;
white-space: nowrap;
display: flex; /* Prevents text box from moving downwards when text is inserted, but it isn't great when display shrinks. */
}
.First-Horizontal-Section-List li {
list-style: none;
display: inline-block;
height: 500px;
width: 550px;
border: solid blue;
margin-left: 5%;
margin-right: 5%;
}
.Image-One {
background-image: url(URL);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.Text-Box-One {
background-image: url(URL);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
I have found some recommendations to use "display: flex" to solve this problem, but I have noticed that using "display: flex" seems to negate "white-space: nowrap" when I shrink the website window. Using "white-space: nowrap" keeps the boxes static when I shrink the window whereas "display: flex" will result in the manipulation of the boxes.
I am looking for a way to have my boxes aligned on the same line while being able to insert text. Ideally, the boxes would also remain static when the window is shrunk. Is there a way to do this?