HTMLは、メインIDを継承するセカンドクラスを設定することは可能ですか？

Question

メインクラスIDを継承するために2番目のクラスを設定することはできますか？

Codepen：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とコンテナを設定しました。ここでは2つのクラスを並べて入れたいと思う。ファーストクラスのproductholderは正常に動作しています。私の唯一の問題はbookingFormHeaderです。それは下にインデントだ、私は、出力例以下のように同じラインを作りたい：

予約が実際に境界ボックスを持つフォームです：私が試した

以下に表示を変更することにより、多くの方法： -

inline-block flex table inline-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>

Answer 2

また、私はまだあなたをしようとしているが、それは、ディスプレイに基づいている、この

<div id="id> 
<div class="class" 
</div> 
</div>