javascript - Vertical align multiple lines including h1 and p elements -

javascript - Vertical align multiple lines including h1 and p elements -

i want create p text , h1 text both vertical align. tried multiple solutions, table solution etc. because have h1 , p, doesn't work both same. or p vertical align, or h1 next p....

class="snippet-code-css lang-css prettyprint-override">#txtslide { border-top: 1px solid #e9e9e9; overflow: hidden; background-color: #f5f5f5; width: 100%; } } #txtslide h1 { font-size: 2vw; text-align: left; margin-left: 4%; margin-top: 2%; margin-bottom: 0; width: 70%; } #txtslide1, #txtslide2, #txtslide3 { float: left; height: 500px; width: 33% } #txtslide1 { border-right: 1px solid #e9e9e9; } #txtslide p { font-family:'source sans pro'; font-size: 1vw; padding-left: 15%; width: 80%; } #txtslide3 p #txtslide1 p { font-size: 1.3vw; padding-left: 18%; width: 64%; padding-top: 5%; } #txtslide1 h1 { padding-left: 15%; } #txtslide img { width: 25%; height: auto; padding-top: 20%; padding-left: 18%; } #txtslide3 p { padding-top:15%; padding-left: 10%; } class="snippet-code-html lang-html prettyprint-override"><div id="txtslide"> <div class="container"> <div id="txtslide1"> <img src="images/kaarten.png" /> <h1>titeln</h1> <p>text text</p> </div> </div> <div class="container"> <div id="txtslide2"> <h1>kop</h1> <p>text text</p> </div> </div> <div class="container"> <div id="txtslide3"> <p>text text</p> </div> </div> </div> </div>

is looking for?

class="snippet-code-css lang-css prettyprint-override">.container{ display: inline-block; height: 500px; width: 33% } h1 { font-size: 4vw; text-align: center; margin-left: 4%; margin-top: 2%; margin-bottom: 0; } p { font-family: 'source sans pro'; font-size: 2vw; text-align: center; } img { width: 25%; height: auto; display: block; margin: auto auto; vertical-align: center; } class="snippet-code-html lang-html prettyprint-override"><div class = "container"> <div id = "txtslide1" > <img src = "images/kaarten.png" /> <h1>titeln</h1> <p> text text </p> </div> </div> <div class = "container"> <h1>title 2</h1> <p> text text </p> </div> <div class = "container"> <h1>title3</h1> <p> text text </p> </div>

javascript css alignment lines