Two elements on the same line, with text on multiple lines

Question

I have two elements that I want on the same row. Currently I have:

#element 1 {
  display:inline-block;
  margin-right:15px;
}

#element 2 {
  display:inline-block;
}

It works, BUT whenever element 2 (text) have more than one row, then everything loses its position. I want element two always stay in one place, and not format when element 2 gets more than two row.

See example picture. Notice in the first row it looks normal, but in the second row when the text is on more than two row, it starts to look bad. See in picture 2 in how I want it too look like.

Answer 1

You can do it in multiple ways. Using flex, using, grid, or using absolute positioning. In this example the number is a css generated content using the counters() function.

 ul { counter-reset: index; padding: 0; } /* List element */ li { counter-increment: index; width: 200px; min-height: 50px; display: flex; padding-bottom: 12px; } /* Element counter */ li::before { content: counters(index, ".", decimal-leading-zero); font-size: 1.5rem; font-weight: bold; flex-grow: 1; min-width: 50px; } /* Element separatin */ li + li { border-top: 1px solid gray; padding-top: 12px; } 

 <ul> <li> lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing </li> <li> lorem ipsumt dolor sit amet consecutor adipiscing </li> </ul> 

Answer 2

I prefer flexbox when doing structures like this. Best way is ul as a container and then have each row be as big as the content of the paragraph. Don't know how your code is, but in this example the row is split with a span.

<ul class="rows">
  <li><span>01</span>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem</li>
  <hr>
  <li><span>01</span>Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem</li>
  <hr>
</ul>

and then the css or (scss) in this case would go something like this.

.rows {
  margin: 0;
  padding: 0;

  li {
    text-decoration: none;
    list-style: none;
    margin-bottom: 10px;
    display: flex; 
    justify-content: space-around;
    width: 50%;

    span {
      margin-right: 20px;
    }
  }
}

written a quick example in codepen: https://codepen.io/anon/pen/jJBKeq

Answer 3

There are multiple ways. CSS Flex is best option. Or use may use absolute position number

HTML

<ul>
    <li class="element-wrap">
        <div class="element-1">1</div>
        <div class="element-2>Lorem Ipsum Dummy text for any content</div>
    </li>
</ul>

CSS - Using absolute position

.element-wrap {
    position: relative;
    z-index: 0;
    padding-left: 50px; //This should be equal to width of first element.
}
.element-1 {
    position: absolute;
    left: 0;
    top: 0;
}

CSS - Using FLEX

.element-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.element-1 {
    width: 40px;//
}