Timeline Layout

by Odisseya

HTML

<ul class="item">
  <li>
    <p class="item__txt"> 1 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рыбного рукописи заглавных подзаголовок, эта образ вдали дороге свой! Большого составитель переписывается языкового текст она.Большого составитель переписывается
      языкового текст она.Большого составитель переписывается языкового текст она.</p>
    <div class="item__img"></div>
  </li>
  <li>
    <p class="item__txt"> 2 Большого составитель переписывается языкового текст она. Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рыбного рукописи заглавных подзаголовок, эта образ вдали дороге свой! Большого составитель переписывается
      языкового текст она.</p>
    <div class="item__img"></div>
  </li>
  <li>
    <p class="item__txt"> 3 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рыбного рукописи заглавных подзаголовок, эта образ вдали дороге свой! Большого составитель переписывается языкового текст она.</p>
    <div class="item__img"></div>
  </li>
  <li>
    <p class="item__txt">4 Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рыбного рукописи заглавных подзаголовок, эта образ вдали дороге свой! Большого составитель переписывается языкового текст она.</p>
    <div class="item__img"></div>
  </li>
</ul>

SCSS

* {
  margin: 0;
  padding: 0;
}

$img-r: 50px;
.item {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap;
  align-items: flex-start;
  list-style-type: none;
}

li {
  width: calc(50% + #{$img-r});
  outline: 4px solid rgba(255, 0, 0, 0.2);
  outline-offset: -2px;
  display: flex;
  text-align: right;
  
  &:nth-child(odd) {
    margin-left: auto;
    
    & .item__txt {
      order: 2;
      text-align: left;
    }
  }
}

.item__img {
  width: ($img-r * 2);
  height: ($img-r * 2);
  background: gold;
  border-radius: 50%;
  flex-shrink: 0;
}