浮动或Flexbox堆叠对齐底部

Question

棘手的。

我想要围绕一个主div包含一些较小的元素。我有这些较小的div向右浮动，主div离开。我有较小的元素使用padding-bottom％保持相对于宽度的高度，如下所示：

 <section class="who">
    <aside id="whoText"></aside>
    <article class="profile">profile1</article>
    <article class="profile">profile2</article>
    <article class="profile">profile3</article>
    <article class="profile">profile4</article>
    <article class="profile">profile5</article>
 </section>

.profile{
    background-color:$primaryColour;
    border:1px red dashed;
    width: 50%;
    float: right;;
     &:before {
            content: "";
            float: left;
            //this div will be only half as tall as it is wide
            padding-bottom: 50%;
        }
     &:after {
            content: "";
            display: table;
            clear: both;
        }
}

这一切都很好用，但我希望顶部留下的空间不是在最后一个元素之后。 Currenly就像这样:(红盒子是我正在谈论的空间。）

但我喜欢这样吗???

感谢您的投入。

罗布。