Making two lists next to each other-CodePudding

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 ><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.

CodePudding user response：

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 >
   <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 ><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 >
      <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>

CodePudding user response：

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 ><br><br>
  <form>
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name"><br><br><br>
    <div >
    <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>