Html 我如何对齐这个？

所以我一直在努力调整这一点。试图玩弄代码，但还是没有运气

.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>

.image{
浮动：左；
左：25%；
填充顶部：20px；
}
.配菜{
浮动：对；
}
div style=“显示：内联块；”>
成分

2个鸡蛋

2汤匙（30毫升）牛奶（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>


成分

2个鸡蛋

2汤匙（30毫升）牛奶（1%）

捏盐

胡椒粉

您还不清楚自己的问题是什么，可能需要提供一些html标记。您被否决了，因为根本不清楚您想要什么。你的html标记在哪里？它有什么问题？您希望它如何显示？请花一些时间格式化您的代码，并解释您试图实现的目标。您想调整什么？图片在左边，配料在右边？总是吗？我想让他们挨着。左边的img旁边是IngreditShow我会把它放在配料下面吗？非常感谢说明步骤1：在小碗中搅拌鸡蛋、牛奶、盐和胡椒粉。