how can set auto width for columns parent and remove columns-gap

Question

I have 2 div inline, one of the div (right side) should take up 30% width and the other div(left side) should take auto width.

The page I am making is a horizontal scrolling page. And I have used ul li in the div(left side) and I want li to be in the form of a column, so I have set column-count with jquery or javascript to set new column automatically when I added new li the column-gap is set 0 to remove the space between them.

In fact, I want the columns to stick together perfectly and li should have , For Example, 300px width and when I add a new li it should add automatically new column and increase the width of the div (left side)

But I don't know, how to do this?

html :

    <main>
        <div class = "right"></div>
        <div class = "left">
           <ul id = "homePage_content-ul">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
           </ul>
        </div>
    </main>

css :

.right{
  width: 30%;
}
.left{
  ... //width must be auto
}

javascript or jquery

var ul = document.getElementById("homePage_content-ul");
var li = ul.getElementsByTagName("li");
var numItems = li.length;

var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul#homePage_content-ul { column-count: " + Math.round(numItems/2) + "; column-gap: 0; }";
document.body.appendChild(css);

Answer 1

try using this on parent element

display: flex;