Один блок увеличивается раньше другого html

При уменьшении разрешения, один блок начинает увеличиваться раньше, это понятно, там текст длиннее. Можно как-нибудь пофиксить? html блока:

<div class="block">
    <div class="block__top">Making a design system from <br>scratch
    </div>
    <div class="block__mid">
       <p>12 Feb 2020</p>
       <p>|</p>
       <p>Design, Pattern</p>
    </div>
    <div class="block__bott">Amet minim mollit non deserunt ullamco est sit aliqua dolor do ametsint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunostrud amet.</div>
</div>

У второго блока вот такой 3 параграф Figma, Icon Design scss:

.block {
    width: 45%;
    height: 45%;
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 10px;
    .block__top {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 38px;
    }
    
    .block__mid {
        font-size: 18px;
        line-height: 26px;
        display: flex;
        margin-bottom: 20px;
        p{
            margin-right: 15px;
        }
    }
    
    .block__bott {
        font-size: 16px;
        line-height: 24px;
    }
}