DIV aligned top middle and bottom html css example | HTML CSS | Web Development

Before we start please do support my Youtube channel Web Developer Green – https://www.youtube.com/channel/UCSilTsUejzMeHJ8rSvp2K_g master, thank you!

DIV ALIGNED TOP HTML CODE

<div class="master-row master-row-1">
	<div class="master-wrap">
    	<h1 class="text-center">DEMO 1</h1>
    	<div class="row-col">
        	<div class="col col-2">
            	<div class="col-d">
                	<img src="img.jpg" alt="" />
                </div>
            </div>
        	<div class="col col-2 pl-30">
            	<div class="col-d">
                    <h2>DIV ALIGNED TOP HTML CSS EXAMPLE</h2>
                    <p>Lorem ipsum dolor sit amet, ferri oratio definitiones ei vim. Mea ei nulla noluisse dissentiunt, id dicat nominati repudiare usu. Nam maluisset consulatu gubergren cu, falli praesent vis ea. Indoctum deseruisse quo ne, pro ex lorem ancillae accusamus. Usu conceptam maiestatis at.</p>
                    <p>Mei semper docendi concludaturque id. An vix paulo urbanitas consetetur. Rebum impedit an usu, te dolor dolorum pro, ex usu amet eruditi. Ne aeque timeam platonem cum, causae inimicus maiestatis ei est, ne suas noster similique ius. Quod pertinax nam id, ad tota partem elaboraret vim. Stet omnium animal ei vel, mei cibo necessitatibus ex.</p>
                    <p>At nonumy quidam pri. Ea euismod vivendum mel, ei vix corpora dignissim, homero concludaturque vix an. Cum dicant senserit ex. Albucius torquatos cum ex, te nemore melius ceteros mei, modus dicat detraxit ea duo. No sea habeo nonumy, cetero persius democritum ea mel. Cibo erat sed ut, est homero verear ei.</p>
                </div>
            </div>
        </div>
    </div>
</div>

DIV ALIGNED CENTER HTML CODE

<div class="master-row master-row-2">
	<div class="master-wrap">
    	<h1 class="text-center">DEMO 2</h1>
    	<div class="row-col">
        	<div class="col col-2 col-middle show-767" style="display:none;">
            	<div class="col-d">
                	<img src="img.jpg" alt="" />
                </div>
            </div>
        	<div class="col col-2 col-middle pr-30">
            	<div class="col-d">
                    <h2>DIV ALIGNED CENTER HTML CSS EXAMPLE</h2>
                    <p>Lorem ipsum dolor sit amet, ferri oratio definitiones ei vim. Mea ei nulla noluisse dissentiunt, id dicat nominati repudiare usu. Nam maluisset consulatu gubergren cu, falli praesent vis ea. Indoctum deseruisse quo ne, pro ex lorem ancillae accusamus. Usu conceptam maiestatis at.</p>
                    <p>Mei semper docendi concludaturque id. An vix paulo urbanitas consetetur. Rebum impedit an usu, te dolor dolorum pro, ex usu amet eruditi. Ne aeque timeam platonem cum, causae inimicus maiestatis ei est, ne suas noster similique ius. Quod pertinax nam id, ad tota partem elaboraret vim. Stet omnium animal ei vel, mei cibo necessitatibus ex.</p>
                    <p>At nonumy quidam pri. Ea euismod vivendum mel, ei vix corpora dignissim, homero concludaturque vix an. Cum dicant senserit ex. Albucius torquatos cum ex, te nemore melius ceteros mei, modus dicat detraxit ea duo. No sea habeo nonumy, cetero persius democritum ea mel. Cibo erat sed ut, est homero verear ei.</p>
                </div>
            </div>
        	<div class="col col-2 col-middle hide-767">
            	<div class="col-d">
                	<img src="img.jpg" alt="" />
                </div>
            </div>
        </div>
    </div>
</div>

DIV ALIGNED BOTTOM HTML CODE

<div class="master-row master-row-3">
	<div class="master-wrap">
    	<h1 class="text-center">DEMO 3</h1>
    	<div class="row-col">
        	<div class="col col-2 col-bottom">
            	<div class="col-d">
                	<img src="img.jpg" alt="" />
                </div>
            </div>
        	<div class="col col-2 col-bottom pl-30">
            	<div class="col-d">
                    <h2>DIV ALIGNED BOTTOM HTML CSS EXAMPLE</h2>
                    <p>Lorem ipsum dolor sit amet, ferri oratio definitiones ei vim. Mea ei nulla noluisse dissentiunt, id dicat nominati repudiare usu. Nam maluisset consulatu gubergren cu, falli praesent vis ea. Indoctum deseruisse quo ne, pro ex lorem ancillae accusamus. Usu conceptam maiestatis at.</p>
                    <p>Mei semper docendi concludaturque id. An vix paulo urbanitas consetetur. Rebum impedit an usu, te dolor dolorum pro, ex usu amet eruditi. Ne aeque timeam platonem cum, causae inimicus maiestatis ei est, ne suas noster similique ius. Quod pertinax nam id, ad tota partem elaboraret vim. Stet omnium animal ei vel, mei cibo necessitatibus ex.</p>
                    <p>At nonumy quidam pri. Ea euismod vivendum mel, ei vix corpora dignissim, homero concludaturque vix an. Cum dicant senserit ex. Albucius torquatos cum ex, te nemore melius ceteros mei, modus dicat detraxit ea duo. No sea habeo nonumy, cetero persius democritum ea mel. Cibo erat sed ut, est homero verear ei.</p>
                </div>
            </div>
        </div>
    </div>
</div>

ALL CSS CODE

.row-col {
	width: 100%;
}
.row-col, .row-col .col {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.col-2 {
	width: 50%;
}
img {
	max-width: 100%;
}
.text-center {
	text-align: center;
}
.pl-30 {
	padding-left: 30px;
}
.pr-30 {
	padding-right: 30px;
}
.col-d {
	display: block;
	width: 100%;
}
.col-middle {
	align-items: center;
}
.master-row-2 {
	background-color: #ccc;
}
.master-row {
	padding: 50px 0;
}
.master-wrap {
	width: 1140px;
	margin: auto;
	max-width: 100%;
	padding: 0 30px;
	box-sizing: border-box;
}
.col-bottom {
	align-items: flex-end;
}
p:last-child {
	margin-bottom: 0;
}
@media screen and (max-width: 767px) {
.hide-767 {
	display: none !important;
}
.show-767 {
	display: block !important;
}
.row-col, .row-col .col {
	display: block;
	width: 100%;
}
.pl-30 {
	padding-left: 0;
}
.pr-30 {
	padding-right: 0;
}
}

Youtube DEMO