我有一个并排设置，使用 div 容器（2 个容器在一个容器中），并且我无法让右侧与我的浮动右侧对齐到顶部

Question

我已经弄清楚如何让我的两个部分并排出现在我的 div 容器中。左侧是幻灯片和幻灯片。正是我希望它出现的位置/方式，但右侧不会与顶部对齐。

我添加了额外的措辞，看看这是否会将其全部“推”到顶部，但它一直在下降。我尝试将vertical-align top添加到.alignright，以及我在这里找到的所有其他对齐解决方案。在其他网站上。

向右浮动的alignright必须保留，否则所有文字都会向左移动，在幻灯片旁边向右移动（看起来很糟糕）。 我已附上当前输出。 “在过去”我会 valign=top &然后，但这没有效果。

<div class = "text">
<p class ="alignright">

Save a Life
<br>
images go here
<br>
Donate Now
<br>
TEXT

</p>
</div>



.alignright {
    float: right;
.text {
  color: #0000A0;
  font-family: Georgia,Times,Times New Roman,serif; 
  font-size: 80px;
  font-weight: bold;
}

Answer 1

#container{
display:flex;
justify-content:space-between;
align-items:center;
}

#left, #right{
border:solid 1px green;


}

#left {

margin-left:150px;
}

<div id='container'>
<div id = 'left'>x<br>x<br>x</div>
<div id = 'right'>x</div>
</div>