div floats to next line - html

Question

I have a prototype lightbox that will float the second element if the text within it exceeds 28 characters. What am I doing wrong??
This is my current CSS and HTML
// Parent Div
.lightbox-item {
z-index: 8200;
top: 50vh;
left: 50vw;
width: auto;
max-height: 650px;
height: auto;
display: inline-block;
background: #fff;
position: fixed;
}
// First Child div
.lightbox-item .avatarBox {
height: 155px;
width: 155px;
position: relative;
float: left;
padding: 0;
background: green;
}
// Second Child div
.lightbox-item .infoBox {
padding: 10px 5px 0 0;
height: auto
position: relative;
width: auto;
float: left;
background: orange;
}
// Third Child div
.lightbox-item .person-info-wrap {
width: 100%;
display: block !important;
position: relative;
z-index: 5;
height: auto;
clear: left;
}
// Secondary elements nested inside 2nd & 3rd Child div
.lightbox-item .infoBox .gallery-member_fullname{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-member_title{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-member_company{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .infoBox .gallery-company_location{margin: 0 auto;line-height:1em;text-align:left;}
.lightbox-item .person-info {
padding: 10px 0 25px 0;
margin: 0 auto;
background-color: red;
color: #fff;
width: auto;
height: auto;
min-height: 275px;
}
.lightbox-item .person-info h3 {
text-transform: uppercase;
font-size: 1.5em;
font-weight: 600;
font-family: "Lato", sans-serif;
line-height: 30px;
width: 320px;
margin: 0 auto;
text-align: center;
}
<div class="lightbox-item" style="opacity: 1; transform: matrix(1, 0, 0, 1, -224.5, -226);">
<div class="avatarBox"></div>
<div class="infoBox">
<h2 class="gallery-member_fullname">Bill Gates</h2>
<div class="gallery-member_title">Founder</div>
<div class="gallery-member_company">Bill and Melinda Gates Found</div>
<div class="gallery-company_location">Nashville, TN 28277
<br>United States</div>
</div>
<div class="person-info-wrap" style="opacity: 1;">
<div class="person-info">
<h3>Active committees</h3>
<ul class="subList">
<li class="subList-item"></li>
</ul>
</div>
</div>
</div>
I have the first 2 divs floating to the left and then the 3rd element is set to block and clearing left. The result I'm trying to achieve is so that if the text expands in the 2nd child element the parent container ( lightbox-item) should expand as well.
THE REAL ISSUE
Sorry, I don't believe I made my problem clear. The second child element(infoBox) floats to the next line when the viewport size decrease below 768px I believe. The parent element expands as expect if viewport size is greater than ~768px.

Answer 1

You must use CSS Media Query to write a specific CSS for a special size
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

.lightbox-item {
z-index: 8200;
top: 50vh;
left: 50vw;
width: auto;
height: auto;
display: inline-block;
background: #fff;
position: fixed;
}
<div class="lightbox-item" style="opacity: 1; transform: matrix(1, 0, 0, 1, -224.5, -226);">
<div class="avatarBox"></div>
<div class="infoBox">
<h2 class="gallery-member_fullname">Bill Gates</h2>
<div class="gallery-member_title">Founder</div>
<div class="gallery-member_company">Bill and Melinda Gates Found</div>
<div class="gallery-company_location">Nashville, TN 28277<br>United States</div>
</div>
<div class="person-info-wrap" style="opacity: 1;">
<div class="person-info">
<h3>Active committees</h3>
</div>
</div>
</div>
Soooooo....
After some tinkering and 2 cups of coffee later. I changed the parent div from display: inline-block to display: inline-table See the change below.
.lightbox-item {
z-index: 8200;
top: 50vh;
left: 50vw;
width: auto;
height: auto;
display: inline-table;
background: #fff;
position: fixed;
}
AND Voila!
My lightbox works as I am expecting. I have other media queries to handle how the children divs stack on mobile.
I'm still open to other suggestions but this solved my problem the quickest without having to resort to restructuring the layout ( FlexBox).
Thanks for your input.