Как это сверстать?

[Svobodin]

 Здравствуйте, подскажите, как можно сверстать вот такую штуку с вертикальной линией? Перерыл весь интернет, всё не то...

[purple/ocean]

.wrap{
    width: 250px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border: 1px grey solid;
}
hr{
    height: 80px;
    width: 1px;
    border: none;
    background-color: grey;
    margin: 0;
}

<div class="wrap">
  <div class="l-side">
    <p>prep</p>
    <p>20 m</p>
  </div>
  <hr>
  <div class="r-side">
    <p>ready in</p>
    <p>8 h 20 m</p>
  </div>
</div>

 

[Svobodin]

Спасибо большое, но мне немного не то нужно... Дело в том, что там нет обводки вокруг, это при загрузке на форум стала так картинка выглядеть. Вот более полный скрин. Ваш код тоже будет интересен, я совсем недавно начал разбираться с HTML/CSS. 

Edited October 13, 2019 by Svobodin