Как реализовать такой элемент через html/css

Мне нужно реализовать элемент как на картинке, но я не знаю как это сделать. https://image.prntscr.com/image/ipRuSmXpRV2B6RjBj6r07Q.png

Я пытался сделать это с помощью , когда первая ячейка имеет значения лет, вторая имеет «разделение», реализованное с помощью ::before и :: after, а третья имеет описание. Но мое решение не работает.

<table>
    <tr>
        <td class = "years">2011 - 2015</td>
        <td>
            <div class = "split"></div>
        </td>
        <td class = "info">
            Your description gives people the information they need to help you answer your question.
        </td>
    </tr>
</table>

.split {
    margin-left: 50px;
    margin-right: 50px;
}

.split::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
}

.split::after {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    border-left: 1px dashed black;
}