How to make Vertical Box List structure using html and css

Question

I want to make something like this. https://www.screencast.com/t/FGZW259E9twg Some points(I can only use one class, only "dd and dt" can be used and structure needs to be like if I add one more "dd and dt" it'll automatically take its structure like previous ones.So can't hard code in CSS.) The HTML code i can use is only this.

<dl class="vertical_box_list">
            <dt>
                <select>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </dt>
            <dd><p>Land must be purchased before road excavating can start</p></dd>
            <dt>
                <select>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </dt>
            <dd><p>Road excavating must start before Asphalt can be laid</p></dd>
            <dt>
                <select>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </dt>
            <dd><p>Laying Asphalt must be complete before line painting can be completed</p></dd>
            <dt>
                <select>
                    <option value="1">Option1</option>
                    <option value="2">Option2</option>
                </select>
            </dt>
            <dd><p>Road excavating must start before Asphalt can be completed</p></dd>
        </dl>

CSS i tried this but only one problem that all the "dt" automatically hides except first one if i use "position:absolute."

.vertical_box_list dt
{
    border: 1px solid;
    width: 140px;
    height: 80px;
    background: antiquewhite;
    position: absolute;
    bottom: 89%;
    left: 2%;
}
.vertical_box_list dd
{
    margin-left: 0;
    margin-bottom: 20px;
    border: 1px solid;
    width: 400px;
    height: 100px;
    z-index: 1;
    background: aliceblue;
}
.vertical_box_list dt select
{
    position: relative;
    top: 35%;
    left: 20%;
}
.vertical_box_list dd p
{
    position: relative;
    top: 40%;
}

Answer 1

dl {
  max-width:30rem;
}

dt, dd {
  margin:0;
  position:relative;
}

dt {
  left:1rem;
  display:inline-block;
  padding:0.125rem 1rem;
  border:1px solid white;
  border-radius:0.5rem;
  z-index:2;
}

dd {
  top:-1rem;
  display:block;
  padding:1rem;
  padding-top:2rem;
  text-align:right;
  z-index:1;
}

dt:nth-of-type(1) {
  background-color: rgba(236, 126, 61, 1);
}

dd:nth-of-type(1) {
  border: 1px solid rgba(236, 126, 61, 1);
  background-color: rgba(236, 126, 61, 0.25);
}

dt:nth-of-type(2) {
  background-color: rgba(208, 124, 96, 1);
}

dd:nth-of-type(2) {
  border: 1px solid rgba(208, 124, 96, 1);
  background-color: rgba(208, 124, 96, 0.25);
}

dt:nth-of-type(3) {
  background-color: rgba(255, 217, 114, 1);
}

dd:nth-of-type(3) {
  border: 1px solid rgba(255, 217, 114, 1);
  background-color: rgba(255, 217, 114, 0.25);
}

dt:nth-of-type(4) {
  background-color: rgba(165, 165, 165, 1)
}

dd:nth-of-type(4) {
  border: 1px solid rgba(165, 165, 165, 1);
  background-color: rgba(165, 165, 165, 0.25);
}

<dl class="vertical_box_list">
<dt>
    <select>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
    </select>
</dt>
<dd>Land must be purchased before road excavating can start</dd>
<dt>
    <select>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
    </select>
</dt>
<dd>Road excavating must start before Asphalt can be laid</dd>
<dt>
    <select>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
    </select>
</dt>
<dd>Laying Asphalt must be complete before line painting can be completed</dd>
<dt>
    <select>
        <option value="1">Option1</option>
        <option value="2">Option2</option>
    </select>
</dt>
<dd>Road excavating must start before Asphalt can be completed</dd>
</dl>

Answer 2

The reason your dts are behaving that way is because they're being positioned relative to their most immediate, non-static parent, I'm guessing it's the dl.

The html doesn't have an element for the close button in your image so that would have to be achieved by a pseudo-element. That's absolutely positioned to not interrupt the dimensions of the dt itself. (if you even need it)

Using position: relative; on the dt/dd, you can adjust their z-indexes and move the dt to overlap the dd. You want the as position relative so it's laid out, occupying its original space in document flow, relative to where that would be (if you give it 'coordinates')

Here's a stab at it.