HTML是否可以设置第二类继承主ID？

Question

我可以设置第二类继承主类ID吗？

代码笔:https://codepen.io/jayvicious/pen/EXardz

.productholder {
  width: 50%;
  display: inline-block;
}

#content2p {
  padding-top: 19px;
  padding-bottom: 40px;
  margin-left: 6cm;
  width: auto;
}

.bookingFormHeader {
  display: inline-flex;
  background-color: lightgrey;
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

<div id="content2p">

  <img class="productholder" src="http://via.placeholder.com/662x442.png">
  <p class="bookingFormHeader">Test Test</p>

</div>

解释:-

我设置了一个 ID 为 content2p 的容器。在这里我想并排放置两个类(class)。第一类 productholder 工作正常。我唯一的问题是 bookingFormHeader 。它缩进到底部，我想让它与下面的示例输出在同一行:

预订实际上是一个带有边框的表格:

我尝试了很多方法，将显示更改为以下内容:-

内联 block
柔性
table
内联表

但我没有运气，是否缺少任何元素？？提前感谢。

Answer 1

这就是你想要的吗？请根据您的喜好调整边距和宽度。

#content2p {
  padding-top: 19px;
  padding-bottom: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bookingFormHeader {
  background-color: lightgrey;
  width: 100px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

<div id="content2p">

  <img class="productholder" src="http://www.placehold.it/80">
  <p class="bookingFormHeader">Test Test</p>

</div>