Html 如何使两个不同的东西在一起？

我有以下8件事：

探测火箭

价格： 发射火箭

探测卫星

价格：

---

发送卫星您可以将这两个类别放入两个不同的

分区

，并将这两个分区包含在父分区中。如下所示：

<div class="parent">
    <div class="item">
        <p id="ERT">Exploration Rocket</p>
        <button id="ERB" onclick=""><img id="ERBI" src="Rocket.svg"></button>
        <h4 id="ERP">Price: </h4>
        <button id="ERS" onclick="">Send Rockets</button>
    </div>

    <div class="item">
        <p id="EST">Exploration Satelite</p>
        <button id="ESB" onclick="buySatelite()"><img id="ESBI" src="Satelite.svg"></button>
        <h4 id="ESP">Price: </h4>
        <button id="ESS" onclick="sendSatelites()">Send Satelites</button>
    </div>
</div>

<style>
    .parent {
        display: flex;
    }
</style>

探测火箭
价格：
发射火箭
探测卫星
价格：
发送卫星
.家长{
显示器：flex；
}

用于信息和提醒，绘制列时不仅有（显示）flex，也有网格方法/布局；）

正文{
列计数：2；/*这足以绘制2列*/
/*从这里开始，只是弥补*/
列规则：1px固体；
文本对齐：居中；
}
p{
边缘：0.01米；
}

探测火箭

价格： 发射火箭

探测卫星

价格： 发送卫星