Div-Header sind nicht auf einer Webseite ausgerichtet

Question

Ich habe eine Homepage auf der Website Ich baue, wo es zwei Reihen von Inhalten gibt. Jede Zeile enthält 2 Absätze; Jeder hat eine Überschrift und zugehörige Schaltflächen. Zum Beispiel:

        This is the second paragraph 
This is the first paragraph   and it does not line up 
"content...................   "content.................... 
..........................   ............................. 
.........................."   ............................." 
            |BUTTON| 

Das Problem ist, dass ich möchte, dass die Header in jedem Div miteinander ausgerichtet sind; Die erste Zeile jedes Headers sollte in einer Linie stehen. Hier ist mein Code für das div:

/* Home page introductory paragraphs layout */ 
div { 
    display: inline-block; 
    height: 200px; 
    width: 500px; 
    padding-left: 75px; 
    padding-right: 75px; 
    padding-top: 40px; 
    padding-bottom: 40px; 
} 

Gibt es eine Möglichkeit zu geben, dass der Header an der Spitze des Blocks immer ist?

Answer 1

Der Standardwert ist vertical-alignbaseline. Sie können es auf top setzen, wenn die Elemente oben ausgerichtet werden müssen.

div { 
    display: inline-block; 
    vertical-align: top; /*NEW*/ 
} 

Answer 2

Wenn Sie möchten, dass zwei divs gleich oben ausgerichtet sind. Wie wäre es mit Fixed Position Tag

position:fixed: 
top:40px; 

Bitte versuchen Sie es und lassen Sie mich weitere Anforderungen wissen.

.a { 
    display: inline-block; 
    height: 200px; 
    width: 500px; 
    padding-left: 75px; 
    padding-right: 75px; 
    padding-bottom: 40px; 
    position:fixed: 
    top:40px; 
}