Vertical timeline with picture on one side and text on the other

Question

I want to do a vertical timeline which displays an img on one side and a text on the other.

The text already gets displayed, but I want a picture on the opposite side.

https://codepen.io/z-/pen/bwPBjY

I took the code from the codepen above and changed it slightly

body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 4px;
    background-color: #00ffff;
}
body .entries {
    width: calc(100% - 80px);
    max-width: 1200px;
    margin: auto;
    position: relative;
    left: -5px;
    z-index: 0;
}
body .entries .entry {
    width: calc(50% - 80px);
    float: left;
    padding: 20px;
    clear: both;
    text-align: right;
}
body .entries .entry:not(:first-child) {
    margin-top: -60px;
}
body .entries .entry .title {
    font-size: 40px;
    position: relative;
    color: #ffffff;
}
body .entries .entry .title:before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border: 4px solid #00ffff;
    background-color: #1d1d1d;
    border-radius: 100%;
    top: 50%;
    transform: translateY(-50%);
    right: -73px;
    z-index: 1000;
}
body .entries .entry .title.big:before {
    width: 24px;
    height: 24px;
    transform: translate(8px, -50%);
}
body .entries .entry .body {
    color: #ffffff;
}
body .entries .entry .body p {
    line-height: 1.4em;
}
body .entries .entry:nth-child(2n) {
    text-align: left;
    float: right;
}
body .entries .entry:nth-child(2n) .title:before {
    left: -73px;
}
body .entries .entry:nth-child(2n) .title.big:before {
    transform: translate(-8px, -50%);
}

It should look something like that

I hope you can help me. Thanks in advance!!!

Answer 1

Consider using display: grid;.

The following is hypothetical, just to get you started, and doesn't build upon the CodePen example.

.entry {
    display: grid;
    grid-gap: 24px; /* use whatever gap you need between text and image */
    grid-template-columns: 1fr 1fr;
}

/* Invert the layout order of odd rows */

.entry:nth-child(odd) .entry__image {
    grid-column: 2;
}

.entry:nth-child(odd) .entry__text {
    grid-column: 1;
}

<div>
    <div class="entry">
        <div class="entry__image">
            <!-- Image goes here -->
        </div>
        <div class="entry__text">
            <!-- Text goes here -->
        </div>
    </div>
</div>