how to put 2 div tag on 1 line and bullet does not follow

Question

I've learning HTML/CSS for 1-2 weeks and currently on a assignment that requires putting 2 div tag on 1 single line and bulleting that line. This assignment does not require float, flex or grid, just using

display: inline-block 

I tried and managed to put 2 div in a line but when the content in div2 is more than 1 line, div1 is kinda shorter than div2 (see image output, I also tried putting vertical-align: top into div1 but then the bullet does not follow. Here a sample test:

.div1,
.div2 {
  display: inline-block;
}

.container {
  width: 100%;
  height: 200px;
  background-color: darkseagreen;
}

.div1 {
  width: 200px;
  /* height: 100px; */
  background-color: green;
  vertical-align: top;
}

.div2 {
  width: 500px;
  /* height: 100px; */
  background-color: cyan;
}

<ul>
  <li>
    <div class="container">
      <div class="div1">
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
      <div class="div2">
        <p>Lorem ipsum dolor sit amet consectetur.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      </div>
    </div>
  </li>
</ul>

And finally, should I put the entire parent div (.container) in a li tag (line3), or as the following ul > .container > li > div1 div2? First Stackoverflow post ever, so apologize for any inconveniences! Thanks.

Here is an expected result (see image expectation)

Answer 1

Maybe try something like this?

.div1,
.div2 {
  display: inline-block;
  vertical-align: top;
}
ul {
  position: relative;
  overflow: hidden;
}
.div1 {
  width: 200px;
}
.div2 {
  width: 500px;
}
p {margin: 0;}
ul::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 1px;
  height: 1000px;
  top: 0;
  left: 27px;
  background: #d7d7d7;
}

li + li {
  padding-top: 10px;
  border-top: 1px solid #e7e7e7;
  margin-top: 10px;
}

<ul>
  <li>
    <div class="div1">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="div2">
      <p>Lorem ipsum dolor sit amet consectetur.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </li>
  
  <li>
    <div class="div1">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="div2">
      <p>Lorem ipsum dolor sit amet consectetur.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
    </div>
  </li>
</ul>