1

I'm trying to achieve a layout like the following:

enter image description here

However, I'm struggling to keep the .date always centered when the alignment of the .content changes (i.e. if it's left of the date or right).

Here's my current approach: 

.timeline {
  border: 1px solid red;
}
.timeline__item {
  padding-bottom: 10px;
}
.timeline__item .content__first {
  order: 1;
}
.timeline__item .date__second {
  order: 2;
}
.timeline__item .content__second {
  order: 2;
}
.timeline__item .date__first {
  order: 1;
}
.timeline__item .date {
  padding: 0px 25px;
}
.timeline__item .content {
  max-width: 45%;
}
.timeline__item .content p {
  margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="timeline">

  <div class="timeline__item d-flex align-items-center justify-content-center ">
    <div class="date date__first">
      <span class="date text-center">2018</span>
    </div>
    <div class="content content__second text-left ">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  
  <div class="timeline__item d-flex align-items-center justify-content-center ">
    <div class="date date__second">
      <span class="date text-center">2016</span>
    </div>
    <div class="content content__first text-right ">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  
</div>

Is my markup correct for this approach? Each new timeline__item generated a new "row", so .date and .content. I cannot change the markup so that all .date's are in one div. What's the best approach for this?

Freddy
  • 683
  • 4
  • 35
  • 114
  • Without **fixed widths** - this is not possible - https://stackoverflow.com/questions/57972830/is-there-a-way-to-center-one-of-the-flex-grid-childrenmore-than-three-and-with – Paulie_D Sep 23 '19 at 09:41
  • 1
    you can move the classes up to the row and use a pseudo element to create the gaps: https://www.bootply.com/9bYhF8CFok – Pete Sep 23 '19 at 09:52

0 Answers0