List with extra column

Question

(I'm sorry for my bad English)

I have a multi-level list with a description column (see example below)

This works well, but if the description has to be on multiple lines, the texts are overlaying on the content below the long description.

Are there any ways to solve this? If a description needs multiple lines, I want the lines below to move down, so the description fits without overwriting any text.

(The reason that I use a list, is because I use Template:Tree_list from wikipedia)

Edit: See here for an example of Wikipedia:

See below for the source code:

.description {
  position: absolute;
  left: 200px;
}

<li><span class="content">row1</span><span class="description">Description1</span></li>
<li><span class="content">row2</span><span class="description">Description2.  The description can be long, and need to be on multiple lines. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span></li>
<li><span class="content">row3</span><span class="description">Description3</span>
  <ul>
    <li><span class="content">row3.1</span><span class="description">Description3.1</span></li>
    <li><span class="content">row3.2</span><span class="description">Description3.2</span>
  </ul>
  <li><span class="content">row4</span><span class="description">Description4</span></li>
  </ul>

Edit

I have done some experiments, and have coming up with this (I have borrow the CSS for the "Tree list" from wikipedia. I getting closer to a perfect solution, but it stil have some issues.

• The description column is not perfect aligned. What is wrong in the calculation och the width?
• The html code is complex, can I make it cleaner?
• Can I in any way get ride of the <div class="line">?

Se code at https://jsfiddle.net/n7t5kaLu/

.treeview .row {
  display: flex;
}

.treeview li .left {
  width: 200px;
  display: flex;
  flex-direction: column;
}

.treeview li li .left {
  width: calc(200px - 20px - 0.3em);
}

.treeview li li li .left {
  width: calc(200px - 40px - 0.6em);
}

.treeview li li li li .left {
  width: calc(200px - 60px - 0.9em);
}

.treeview li li li li li .left {
  width: calc(200px - 80px - 1.2em);
}

.right {
  width: 100%;
  text-indent: 0;
}

.treeview ul {
  padding: 0;
  margin: 0;
  width: 100%;
}

.treeview li {
  padding: 0;
  margin: 0;
  list-style-type: none;
  list-style-image: none;
}

.treeview .line {
  background: url(//upload.wikimedia.org/wikipedia/commons/f/f2/Treeview-grey-line.png) no-repeat 0 -3px;
  height: 100%
}

.treeview li li {
  background: url(//upload.wikimedia.org/wikipedia/commons/f/f2/Treeview-grey-line.png) no-repeat 0 -2981px;
  padding-left: 20px;
  text-indent: 0.3em;
}

.treeview li li.lastline {
  background-position: 0 -5971px
}

.treeview li.emptyline > ul {
  margin-left: -1px
}

.treeview li.emptyline > ul > li:first-child {
  background-position: 0 9px
}

<div class="treeview">
  <ul>
    <li>
      <div class="row">
        <div class="left">
          root
          <div class="line"></div>
        </div>
        <div class="right">
          - Description
        </div>
      </div>
      <ul>
        <li>
          <div class="row">
            <div class="left">
              row 1
              <div class="line"></div>
            </div>
            <div class="right">
              - Description XXXXKJXLKXJKJXLKJXLKJX LKXJXL K J X L K X J K X J X L A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Å Ä Ö
            </div>
          </div>
          <ul>
            <li class="lastline">
              <div class="row">
                <div class="left">
                  row 1.1
                  <div class="line"></div>
                </div>
                <div class="right">
                  - Description XXXXKJXLKXJKJXLKJXLKJX LKXJXLKJXLKXJ KXJXL
                </div>
              </div>
              <ul>
                <li class="lastline">
                  <div class="row">
                    <div class="left">
                      row1.1.1
                      <div class="line"></div>
                    </div>
                    <div class="right">
                      - Description kföljlkdsj fjfskjf kjflksf
                    </div>
                  </div>
                  <ul>
                    <li class="lastline">
                      <div class="row">
                        <div class="left">
                          row1.1.1.1
                          <div class="line"></div>
                        </div>
                        <div class="right">
                          - Description kföljlkdsj fjfskjf kjflksf
                        </div>
                      </div>
                    </li>
                  </ul>
                </li>

              </ul>
            </li>
          </ul>
        </li>
        <li class="lastline">
          <div class="row">
            <div class="left">
              row1XXXX
            </div>
            <div class="right">
              - DescriptionXXXXXXXX
            </div>
          </div>
        </li>
      </ul>
    </li>
    <!--root-->
  </ul>
</div>

Answer 1

When you apply position: absolute to an element, you remove it from the normal flow. This means that it doesn't take up any space in the layout.

That's why surrounding elements are overlapping the absolutely-positioned element (.description): they don't even know it exists.

Instead of position: absolute try position: relative, which doesn't remove elements from the normal flow:

.description {
  position: relative;
  left: 200px;
}

<ul>
  <li>
    <span class="content">row1</span>
    <span class="description">Description1</span>
  </li>
  <li>
    <span class="content">row2</span>
    <span class="description">Description2.  The description can be long, and need to be on multiple lines. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</span>
  </li>
  <li>
    <span class="content">row3</span>
    <span class="description">Description3</span>
    <ul>
      <li>
        <span class="content">row3.1</span>
        <span class="description">Description3.1</span>
      </li>
      <li>
        <span class="content">row3.2</span>
        <span class="description">Description3.2</span>
      </li>
    </ul>
    <li><span class="content">row4</span><span class="description">Description4</span></li>
</ul>