html - div floats to next line

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>

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