Div Floats To Next Line

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 I have the fir

Solution 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

Solution 2:

.lightbox-item {
      z-index: 8200;
      top: 50vh;
      left: 50vw;
      width: auto;
      height: auto;
      display: inline-block;
      background: #fff;
      position: fixed;
    }

<divclass="lightbox-item"style="opacity: 1; transform: matrix(1, 0, 0, 1, -224.5, -226);"><divclass="avatarBox"></div><divclass="infoBox"><h2class="gallery-member_fullname">Bill Gates</h2><divclass="gallery-member_title">Founder</div><divclass="gallery-member_company">Bill and Melinda Gates Found</div><divclass="gallery-company_location">Nashville, TN 28277<br>United States</div></div><divclass="person-info-wrap"style="opacity: 1;"><divclass="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.