column-count property, don't wrap on containing element

Question

I've made the following with CSS (see screenshot below), which is exactly the format I want, where the reviews are side by side, with a slight offset. I'm using the column-count: 2; css property here. But as you can see in the screenshot, one of the reviews (and images) gets cut in half and is also moved to the next column.

Is there a way to not 'clip around' on a single review (which is contained in a single li), but only after one?

My css and html is basically the following.

.reviews ul {
    column-count: 2;
    margin: 40px 0;
}

.reviews li {
    margin-bottom: 60px;
}
/* slightly more for stars etc.. but not relevant */

 <ul>
          <li>
            <span class="stars stars-2"></span>
            <p>Altijd meteen hulp als er eens iets mis gaat met mijn website. Maar eigenlijk gaat er zelden iets mis! </p>
            <div class="profile">
              <div class="profile-image"></div>
              <p>Anna Rodenburg <span class="function">Functie titel</span></p>
            </div>
          </li>
          <li>
            <span class="stars stars-3"></span>
            <p>Altijd meteen hulp als er eens iets mis gaat met mijn website. Maar eigenlijk gaat er zelden iets mis! </p>
            <div class="profile">
              <div class="profile-image"></div>
              <p>Anna Rodenburg <span class="function">Functie titel</span></p>
            </div>
          </li>
          <li>
            <span class="stars stars-4"></span>
            <p>Altijd meteen hulp als er eens iets mis gaat met mijn website. Maar eigenlijk gaat er zelden iets mis! </p>
            <div class="profile">
              <div class="profile-image"></div>
              <p>Anna Rodenburg <span class="function">Functie titel</span></p>
            </div>
          </li>
</ul>

Answer 1

Make .review li have display: inline-block to stop it being split over columns. – A Haworth 16 mins ago

Worked.