How do I display 2 lists next to each other (horizontally) using CSS/HTML?

Question

I'm trying to get two lists to display next to each other like this:

li 1.1   li 2.1
li 1.2   li 2.2
li 1.3   li 2.3

(where the first number is the list number and the second number is the item # of the list)

I have tried different methods including:

1. setting the list displays to block, inline, or inline-block
2. changing div to span (because div is a block element and span is inline)
3. changing the left/right margins + padding so the lists won't overlap each other (works for no overlap, but the lists need to start at the same y position/at the top of the screen, so it doesn't really help that much)

most of the things I tried have been responses to other stack overflow questions that were similar, but not the same

current code (best viewed full page):

hr {border: 1px solid rgb(0,255,0);}
.l {margin-left:0px; width:18%;}
.m {margin-left:20%; margin-right:30%;}
.vr1 {transform: rotate(90deg); width:100%; margin-left:-30%;}

.forms {margin-left: 0px; width:20%;}
.steps {margin-left: 20%; margin-right:30%; width:40%;}

<span>
    <ul style="list-style-type:none;padding-left:0px;" class="forms l">
      <li>Standard Form:<br>y = ax² + bx + c<hr></li>
      <li>Vertex Form:<br>y = a(x-h)² + k<hr></li>
      <li>Intercept Form:<br>y = a(x - p)(x - q)<hr></li>
      <li>Slope Intercept Form:<br>y = mx + b<hr></li>
      <li>Point Slope Form:<br>y - y₁ = m(x - x₁)<hr></li>
    </ul>
  <hr class="vr1">
    <ol class="steps m">
      <li>re-write in standard form if necessary; factor any common terms; identify a, b, and c</li> <hr>
      <li>multiply a and c</li> <hr>
      <li>find the factors of ac<br>(think: what are two numbers that multiply to ac?)</li> <hr>
      <li>if ac is positive: pick factors that add up to b<br>if ac is negative: pick factors that subtract to b</li> <hr>
      <li>replace the middle term (b) with the factors from step 3 + 4</li> <hr>
      <li>group the equation into 2 seperate parts</li> <hr>
      <li>find the common factors in each group and factor them out (of the parenthesis) to the front of the groups</li> <hr>
      <li>if step 6 has been done correctly, then the first and second terms have a common factor</li> <hr>
      <li>check your answer by multiplying the first factors together using the FOIL method (First Outside Inside Last)</li> <hr>
    </ol>
  </span>

Answer 1

You need to float the elements to the left, and make sure the sum of the widths is less or equal to 100%. Also, the <hr> break the line, so you can't use it here.

I'd recommend using bootstrap or some other CSS framework to make your life easier.

   hr {
        border: 1px solid rgb(0, 255, 0);
    }

    .l {
        margin-left: 0px;
        width: 18%;
    }

    .m {
        margin-left: 20%;
        margin-right: 30%;
    }

    .vr1 {
        transform: rotate(90deg);
        width: 100%;
        margin-left: -30%;
    }

    .forms {
        margin-left: 0px;
        width: 20%;
        float: left;
        box-sizing: border-box;

    }

    .steps {
        margin-left: 0;
        width: 40%;
        float: left;
        box-sizing: border-box;
        border-left: 1px solid rgb(0, 255, 0);


    }

    .clear {
        clear: both;
    }

<span>
<ul style="list-style-type:none;padding-left:0px;" class="forms">
  <li>Standard Form:<br>y = ax² + bx + c<hr></li>
  <li>Vertex Form:<br>y = a(x-h)² + k<hr></li>
  <li>Intercept Form:<br>y = a(x - p)(x - q)<hr></li>
  <li>Slope Intercept Form:<br>y = mx + b<hr></li>
  <li>Point Slope Form:<br>y - y₁ = m(x - x₁)<hr></li>
</ul>
<!--  <hr class="vr1">-->
<ol class="steps">
  <li>re-write in standard form if necessary; factor any common terms; identify a, b, and c</li> <hr>
  <li>multiply a and c</li> <hr>
  <li>find the factors of ac<br>(think: what are two numbers that multiply to ac?)</li> <hr>
  <li>if ac is positive: pick factors that add up to b<br>if ac is negative: pick factors that subtract to b</li> <hr>
  <li>replace the middle term (b) with the factors from step 3 + 4</li> <hr>
  <li>group the equation into 2 seperate parts</li> <hr>
  <li>find the common factors in each group and factor them out (of the parenthesis) to the front of the groups</li> <hr>
  <li>if step 6 has been done correctly, then the first and second terms have a common factor</li> <hr>
  <li>check your answer by multiplying the first factors together using the FOIL method (First Outside Inside Last)</li> <hr>
</ol>
  </span>

Answer 2

This changes some things up and removes elements you don't need (like <hr> tags).

1. Changes the list containers to a div (block element)
2. Makes the div a flex parent
3. Removes all of the hr tags in favor of using padding/margin/borders.

I added comments to the CSS.

/* Sets all elements to include padding in the calculation of width */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing */
* {
  box-sizing: border-box;
}

/* sets a parent container to a flex element */
.list-container {
  display: flex;
}

/* sets the li items to have similar styles as the original hr tags */
.forms li,
.steps li {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgb(0, 255, 0);
  list-style-position: inside;
}

/* sets the forms element to 25%. This can change to whatever */
.forms {
  width: 25%;
}

.steps {
  /* we are adding margin, so we need to remove that width from the percentage. The width of the forms and steps element should equal 100% */
  width: calc( 75% - 20px);
  padding-left: 20px;
  margin-left: 20px;
  /* replaces the hr that was used to divide the lists */
  border-left: 1px solid rgb(0, 255, 0);
}

<div class="list-container">
  <ul style="list-style-type:none;padding-left:0px;" class="forms l">
    <li>Standard Form:<br>y = ax² + bx + c</li>
    <li>Vertex Form:<br>y = a(x-h)² + k</li>
    <li>Intercept Form:<br>y = a(x - p)(x - q)</li>
    <li>Slope Intercept Form:<br>y = mx + b</li>
    <li>Point Slope Form:<br>y - y₁ = m(x - x₁)</li>
  </ul>
  <ol class="steps m">
    <li>re-write in standard form if necessary; factor any common terms; identify a, b, and c</li>
    <li>multiply a and c</li>
    <li>find the factors of ac<br>(think: what are two numbers that multiply to ac?)</li>
    <li>if ac is positive: pick factors that add up to b<br>if ac is negative: pick factors that subtract to b</li>
    <li>replace the middle term (b) with the factors from step 3 + 4</li>
    <li>group the equation into 2 seperate parts</li>
    <li>find the common factors in each group and factor them out (of the parenthesis) to the front of the groups</li>
    <li>if step 6 has been done correctly, then the first and second terms have a common factor</li>
    <li>check your answer by multiplying the first factors together using the FOIL method (First Outside Inside Last)</li>
  </ol>
</div>