CSS calc property to create a chronology

by thmain

HTML

<div class="chronology">
    <div class="event">
        <div class="connector"></div>
        <div class="event-details">
            <div class="col-1">
                <div class="baloon">1965</div>
            </div>
            <div class="col-2">
                <div class="headline">Touch screen technology was invented by E.A. Johnson</div>
            </div>
        </div>
    </div>
    <div class="event">
        <div class="connector"></div>
        <div class="event-details">
            <div class="col-1">
                <div class="baloon">1968</div>
            </div>
            <div class="col-2">
                <div class="headline">Douglas Engelbart gives the mother of all demos</div>
            </div>
        </div>
    </div>
    <div class="event">
        <div class="connector"></div>
        <div class="event-details">
            <div class="col-1">
                <div class="baloon">1988</div>
            </div>
            <div class="col-2">
                <div class="headline">Mark Weiser from Xerox Parc gives birth to the notion of ubiquitous computing</div>
            </div>
        </div>
    </div>
</div>

CSS

.chronology {
    margin: 20px;
}
.event {
    float: left;
    position: relative;
    padding-bottom: 20px;
}
.baloon {
    border-radius: 50%;
    color: #768696;
    height: 42px;
    width: 42px;
    text-align: center;
    font-size: 15px;
    margin: 0 30px;
    line-height: 2.6em;
    font-weight: bold;
    border: 2px solid #8A97ED;
    box-sizing: border-box;
}
.connector {
    position: absolute;
    left: 51px;
    top: 42px;
    width: 2px;
    height: calc(100% - 42px);
    background-color: #8A97ED;
}
.event-details {
    display: block;
}
[class|="col"] {
    box-sizing: border-box;
    float: left;
    margin-left: 0;
}
.col-2 {
    width: 270px;
    position: relative;
}
.headline {
    width: 250px;
}