高さをずらすことなく一番上のアイコンを整列する

Question

it's as easy asの直下の上部にあるカメラアイコンだけを整列しようとしています。しかし、タイトルの下のテキストの量を増やすと、他のコンポーネントがプッシュダウンされます。

<h2>Its As Easy As ...</h2> 
<div style={{margin: '10px 0', display: 'inline-block'}}> //wrapper for all 3 

    // Icon with title component 
    <div style={{display: 'inline-block', margin: '20px 10px', width: '200px'}}> 
     <div style={{margin: '0 0 10px'}}> 
     <FontAwesome name="camera" size="4x"/> 
     </div> 
     <div> 
     <h3 style={{margin: '10px 0'}}>{title}</h3> 
     <div>{desc}</div> 
     </div> 
    </div> 
    ...repeat 2 more for the others 
</div> 

私はdesc属性にいくつかのテキストを渡していますし、そのテキストが長い場合には、他のコンポーネントを押し下げます。

固定高さを設定しようとしましたが、コンポーネントの全体の高さが増えただけです。

descフィールドの長いテキストが他のコンポーネントの高さに影響しないように、アイコンをどのように整列させますか？あなたは、例えば応答グリッド/カラムを使用してになりますあなたはトップレベルdivは以下のきを作ってみることができ

Answer 1

...

<div style={{margin: '10px 0', display: 'flex', alignItems: 'start', justifyContent: 'center'}}>