我该如何对齐？

Question

所以我一直试图调整这个。试着玩代码，但仍然没有运气

.image{

float: left;
padding-left: 25%;
padding-top: 20px;
}
 .side-menu{
float: right;
 }
div style="display: inline-block;">
    <div class="image">
    <img src="egg.jpg" width="400" height="400">
    </div>
    <div class="side-menu">
        <h1>Ingredients</h1>
        <p>
        2 eggs<br>
        2 tbsp (30 mL)milk (1%)<br>
        Pinch salt<br>
        Pinch pepper</p>
    </div>
    </div>

Answer 1

将两个子div放在容器div中，然后给两个子div float:left;属性并排显示两个子div。

这是代码： 的 CSS

.container {
    height:auto;
    width:auto;
}

.image{
float: left;
padding-left: 25%;
padding-top: 20px;
}
 .side-menu{
float: left;
 }

<强> HTML

<div class="container">
    <div class="image">
        <img src="egg.jpg" width="400" height="400">
    </div>

    <div class="side-menu">
        <h1>Ingredients</h1>
        <p>
        2 eggs<br>
        2 tbsp (30 mL)milk (1%)<br>
        Pinch salt<br>
        Pinch pepper</p>
    </div>
</div>