I'm looking for a way to dynamically break a continuous text into multiple columns **only if** the content of the first column is overflowing. It should be responsive and work for any device width. The solution can be (S)css or JavaScript.

I already tried using `column-count` like suggested [here](https://stackoverflow.com/questions/3009670/flow-2-columns-of-text-automatically-with-css) but this always creates multiple columns no matter if there is still enough space in the first column.

![This is what I am looking for visually](https://i.stack.imgur.com/2W6sS.png)

This is about what I want to achieve just without the mentioned `column-count`

```css
.content {
  height: 90vh;
}

.text {
  width: 300px;
  column-count: 2;
}
```

```html
 <div class="content">
   <div class="text">
      Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
   </div>
 </div>
```