Css 浮动或flexbox堆叠对齐底部

棘手的一个

我有一堆较小的元素，我想环绕一个主div。我有这些较小的div，它们在右侧浮动，主div在左侧浮动。我使用填充底部%使较小的元素保持相对于宽度的高度，如下所示：

 <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;
        }
}

简介1
简介2
简介3
简介4
简介5
.个人资料{
背景色：$原色；
边框：1px红色虚线；
宽度：50%；
浮动：对；；
&：之前{
内容：“；
浮动：左；
//这个div只有它宽的一半高
垫底：50%；
}
&：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
}

这一切都很好地工作，但我希望在顶部留下的空间，而不是在最后一个元素之后。 现在是这样的：（红色的盒子就是我所说的空间。）

但我喜欢这样

谢谢你的意见

---

Rob。

请将您的HTML标记包括在内，这样人们就可以看到您是如何构建的，并希望能帮助您，有人能帮我吗？我曾尝试使用JavaScript设置右上角框的高度，但在调整大小时会出现问题，有时会将最后一个框放下。。。