title: How to make Vertical Box List structure using html and css
body: <p>I want to make something like this. <a href="https://www.screencast.com/t/FGZW259E9twg" rel="nofollow noreferrer">https://www.screencast.com/t/FGZW259E9twg</a>
  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.</p>
  
  <pre><code>&lt;dl class="vertical_box_list"&gt;
              &lt;dt&gt;
                  &lt;select&gt;
                      &lt;option value="1"&gt;Option1&lt;/option&gt;
                      &lt;option value="2"&gt;Option2&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/dt&gt;
              &lt;dd&gt;&lt;p&gt;Land must be purchased before road excavating can start&lt;/p&gt;&lt;/dd&gt;
              &lt;dt&gt;
                  &lt;select&gt;
                      &lt;option value="1"&gt;Option1&lt;/option&gt;
                      &lt;option value="2"&gt;Option2&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/dt&gt;
              &lt;dd&gt;&lt;p&gt;Road excavating must start before Asphalt can be laid&lt;/p&gt;&lt;/dd&gt;
              &lt;dt&gt;
                  &lt;select&gt;
                      &lt;option value="1"&gt;Option1&lt;/option&gt;
                      &lt;option value="2"&gt;Option2&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/dt&gt;
              &lt;dd&gt;&lt;p&gt;Laying Asphalt must be complete before line painting can be completed&lt;/p&gt;&lt;/dd&gt;
              &lt;dt&gt;
                  &lt;select&gt;
                      &lt;option value="1"&gt;Option1&lt;/option&gt;
                      &lt;option value="2"&gt;Option2&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/dt&gt;
              &lt;dd&gt;&lt;p&gt;Road excavating must start before Asphalt can be completed&lt;/p&gt;&lt;/dd&gt;
          &lt;/dl&gt;
  </code></pre>
  
  <p>CSS i tried this but only one problem that all the "dt" automatically hides except first one if i use "position:absolute."</p>
  
  <pre><code>.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%;
  }
  </code></pre>