Making two lists next to each other - html

Question

I'm currently making a form in HTML and trying to get two lists next to each other. The tricky part is, that the first list is cut in half, so it has 2 columns, while the other doesn't. I cannot fixate the column width for the first one for some reason, and the other list is put after the first one. So how could I fix my code, so it would work as I intended to?
Heres the HTML,CSS code:
.form ul,
li {
margin: 0;
padding: 0;
list-style: none;
column-width: 100px;
column-count: 2;
border-spacing: 50px 0;
border-collapse: separate;
}
.form li+li {
margin-top: 10px;
}
#other ul {
display: inline-block
}
#other ul,
li {
column-count: 1;
column-width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
<div class="form"><br><br>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br><br> Who is gonna be the champion?
<ul>
<li>
<input type="radio" id="ham" name="names" value="Hamilton">
<label for="ham">Hamilton</label>
</li>
<li>
<input type="radio" id="rus" name="names" value="Russell">
<label for="rus">Russell</label>
</li>
...
</ul>
<div id="other">
Which team is gonna be the winner overall?
<ul>
<li>
<input type="radio" id="mer" name="teams" value="Mercedes">
<label for="mer">Mercedes</label>
</li>
<li>
<input type="radio" id="rb" name="teams" value="Red Bull">
<label for="rb">Red Bull</label>
</li>
...
</ul>
</div>
</form>
</div>
Where both using the form class, and the second list using the "other" division too.

Answer 1

You can use flexbox to achieve it
.flexbox {
display: flex;
}
.flexbox div {
flex: 0 0 50%; /* cut divs into half */
}
Your HTML will be possibly like below
<div class="flexbox">
<div>
<p>Question 1</p>
<ul>...</ul>
</div>
<div>
<p>Question 2</p>
<ul>...</ul>
</div>
<div>
.form ul,
li {
margin: 0;
padding: 0;
list-style: none;
column-width: 100px;
column-count: 2;
border-spacing: 50px 0;
border-collapse: separate;
}
.form li+li {
margin-top: 10px;
}
#other {
width: 50%;
margin-left: auto;
}
#other ul {
display: inline-block
}
#other ul,
li {
column-count: 1;
column-width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
#other p {
margin-top: 0;
}
.flexbox {
display: flex;
}
<div class="form"><br><br>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br><br>
<p>Who is gonna be the champion?</p>
<div class="flexbox">
<ul>
<li>
<input type="radio" id="ham" name="names" value="Hamilton">
<label for="ham">Hamilton</label>
</li>
<li>
<input type="radio" id="rus" name="names" value="Russell">
<label for="rus">Russell</label>
</li>
...
</ul>
<div id="other">
<p>Which team is gonna be the winner overall?</p>
<ul>
<li>
<input type="radio" id="mer" name="teams" value="Mercedes">
<label for="mer">Mercedes</label>
</li>
<li>
<input type="radio" id="rb" name="teams" value="Red Bull">
<label for="rb">Red Bull</label>
</li>
...
</ul>
</div>
</div>
</form>
</div>

Answer 2

Add container for your lists, then give this container => display: flex
.form ul,
li {
margin: 0;
padding: 0;
list-style: none;
column-width: 100px;
column-count: 2;
border-spacing: 50px 0;
border-collapse: separate;
}
.form li+li {
margin-top: 10px;
}
#other ul {
display: inline-block
}
#other ul,
li {
column-count: 1;
column-width: 100px;
margin: 0;
padding: 0;
list-style: none;
}
.lists-container{
display: flex
}
<div class="form"><br><br>
<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br><br>
<div class="lists-container">
<div id="first">
Who is gonna be the champion?
<ul>
<li>
<input type="radio" id="ham" name="names" value="Hamilton">
<label for="ham">Hamilton</label>
</li>
<li>
<input type="radio" id="rus" name="names" value="Russell">
<label for="rus">Russell</label>
</li>
...
</ul>
</div>
<div id="other">
Which team is gonna be the winner overall?
<ul>
<li>
<input type="radio" id="mer" name="teams" value="Mercedes">
<label for="mer">Mercedes</label>
</li>
<li>
<input type="radio" id="rb" name="teams" value="Red Bull">
<label for="rb">Red Bull</label>
</li>
...
</ul>
</div>
</div>
</form>
</div>