I am trying to place a section with 4x4 fields. Each field will hold a picture with header and paragraph centered horizontally and vertically on a picture. I would like to do that by not implementing pictures as a backgrounds for each field. I am having problem centering header and paragraph in a field.
.container-2 {
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
margin-bottom: 100px;
}
#pic-1 {
grid-column: 1/3;
grid-row: 1/2;
width: 100%;
height: 100%;
}
#pic-1 img {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#pic-1 h3 {
z-index: 1;
text-align: center;
}
#pic-2 {
grid-column: 3/5;
grid-row: 1/2;
}
#pic-3 {
grid-column: 1/3;
grid-row: 2/3;
}
#pic-4 {
grid-column: 3/5;
grid-row: 2/3;
}
<div class="container-2">
<div id="pic-1">
<img src="./img/practise-areas.jpg" alt="">
<h3>USLUGE KOJE PRUZAMO</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit, consequatur veniam dolorem eligendi tenetur ex?</p>
</div>
<div id="pic-2">
<img src="./img/who-we-are.jpg" alt="">
<h3>KO SMO MI?</h3>
</div>
<div id="pic-3">
<img src="./img/getting-started2.jpg" alt="">
<h3>KONTAKTIRAJTE NAS</h3>
</div>
<div id="pic-4">
<img src="./img/how-we-work.jpg" alt="">
<h3>NAS NACIN RADA</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit, consequatur veniam dolorem eligendi tenetur ex?</p>
</div>
</div>
[...] not implementing pictures as a backgrounds
One approach which creates the effect you are looking to achieve (ie. employing marked up images as element backgrounds) is to give each image which precedes the heading and the paragraph a position: absolute (to take it out of document flow) and then apply the styles: top: 0, left: 0 and width: 100%, height: 100%.
I am having problem centering header and paragraph in a field.
To horizontally center the heading and the paragraph in each field, you simply need to apply the style: text-align: center.
Working Example:
.container-2 {
display: grid;
grid-template-columns: repeat(2, 50%);
grid-template-rows: repeat(2, 50%);
}
.container-2 div {
position: relative;
text-align: center;
}
.container-2 img {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container-2">
<div id="pic-1">
<img src="./img/practise-areas.jpg" alt="">
<h3>USLUGE KOJE PRUZAMO</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit, consequatur veniam dolorem eligendi tenetur ex?</p>
</div>
<div id="pic-2">
<img src="./img/who-we-are.jpg" alt="">
<h3>KO SMO MI?</h3>
</div>
<div id="pic-3">
<img src="./img/getting-started2.jpg" alt="">
<h3>KONTAKTIRAJTE NAS</h3>
</div>
<div id="pic-4">
<img src="./img/how-we-work.jpg" alt="">
<h3>NAS NACIN RADA</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi velit, consequatur veniam dolorem eligendi tenetur ex?</p>
</div>
</div>
Related
I was trying to make a chat UI with some actions that show in an overlay, but the buttons got chopped off. Here's what I tried to do:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
I'm looking for something that looks like a grid, and would get longer if more buttons were added.
If I set flex-direction to row instead, it works fine, but that makes the buttons not be stacked. If I remove overflow: hidden I can see the buttons outside of the overlay, instead of it staying inside of the box. If I set a width for the overlay, things work fine, but I want the width to be dynamic.
Is this what you are looking for?
What I did was made the parent container display: flex; so it will expand to the size of the child div .overlay, then simply made the overlay a grid with only 1 column in order to have the buttons in 1 column.
.parent {
position: relative;
background: #111;
color: white;
height: 100%;
display: flex;
}
.overlay {
background: purple;
display: grid;
grid-template-columns: 1fr;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
EDIT: ok maybe this is what you want?
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
OK last edit then im giving up if this isn't it:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
display: flex;
}
.overlay {
background: purple;
display: inline-block;
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.'
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
Try giving the parent a fixed height, based on the height of the buttons. For example if I try: height: 100px; then I can see the buttons just fine as a vertical grid to the right of the text.
#container{
display:flex;}
#x, #y{
display:flex;}
<div id='container'>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
</div>
<div>
<div id='x'>
<button>
A
</button>
<button>
B
</button>
</div>
<div id='y'>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
</div>
Got this to work with grid:
.parent {
position: relative;
overflow: hidden;
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
Flex can do it.
Make three minor adjustments to your CSS code. (No changes to HTML.)
.parent {
position: relative;
/* overflow: hidden; */ /* 1 */
background: #111;
color: white;
}
.overlay {
background: purple;
position: absolute;
right: 0;
top: 0;
bottom: 0;
display: flex;
/* flex-direction: column; */ /* 2 */
flex-wrap: wrap;
}
button {
flex-basis: 50%; /* 3 */
}
<div class="parent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque sit odio temporibus quidem, tempora libero nobis fuga impedit alias illum.
<div class="overlay">
<button>
A
</button>
<button>
B
</button>
<button>
C
</button>
<button>
D
</button>
</div>
</div>
I want to make layout like this
On PC:
List 1 |List2
L1.Item1|L2.Item1
L1.Item2|L2.Item2
L1.ItemN|L2.ItemN.
Show on mobile like this:
List 1
L1.Item1
L1.Item2
L1.ItemN
List2
L2.Item1
L2.Item2
L2.ItemN
html, body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px repeat(auto-fit, auto);
background-color: #1aaa00;
height: 100%;
text-align: center;
}
.grid > * {
outline: 1px dashed #666;
}
.head {
grid-area: 1 / 1 / 3 / 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="grid">
<div class="head">Header</div>
<div>List 1</div>
<div>List 2</div>
<div>Position 1. List 1 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam ipsa alias molestias accusamus enim veritatis! Pariatur fugiat maiores fuga sed nisi itaque quisquam, recusandae, accusamus cumque. Facilis, ipsum, vitae?</div>
<div>Position 1. List 2</div>
<div>Position 2. List 1</div>
<div>Position 2. List 2 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolorum!</div>
<div>Position 3. List 1</div>
<div>Position 3. List 2</div>
</div>
</body>
</html>
Every item must be opposite the same item at neighbouring list. The number of rows is not fixed but same at both lists. Height of rows can be different also. It depends on content.
How can I show on mobile List 1 first and List 2 under it?
I tried grid-auto-flow: column, and reorder DIVs in HTML, but I need to specify grid-template-rows to make it work. And I don't know how much rows will it be so don't know how much 1fr set there.
You can adjust the order of only the second elements of the column using nth-child() then simply make your layout one column on mobile:
/*html,
body {
height: 100%;
} no more needed with 100vh*/
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: #1aaa00;
min-height: 100vh; /*better use min-height*/
text-align: center;
}
.grid>* {
outline: 1px dashed #666;
}
.head {
grid-column: 1 / -1; /*use -1 to avoid creating a extra column on mobile*/
min-height: 50px;
}
#media all and (max-width:800px) {
.grid {
grid-template-columns: 1fr; /*one column*/
}
.grid> :nth-child(2n+1) {
order: 2; /*all the list2 at the bottom*/
}
.grid>div.head {
order: -1; /*the head should stay on the top*/
}
}
<div class="grid">
<div class="head">Header</div>
<div>List 1</div>
<div>List 2</div>
<div>Position 1. List 1 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam ipsa alias molestias accusamus enim veritatis! Pariatur fugiat maiores fuga sed nisi itaque quisquam, recusandae, accusamus cumque. Facilis, ipsum, vitae?</div>
<div>Position 1. List 2</div>
<div>Position 2. List 1</div>
<div>Position 2. List 2 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolorum!</div>
<div>Position 3. List 1</div>
<div>Position 3. List 2</div>
</div>
In case you want to have the good order in your HTML code you can try this:
/*html,
body {
height: 100%;
} no more needed with 100vh*/
* {
margin: 0;
padding: 0;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: #1aaa00;
grid-auto-flow:dense; /*to fill all the space*/
min-height: 100vh; /*better use min-height*/
text-align: center;
}
.grid>* {
outline: 1px dashed #666;
grid-column:1; /*list one column 1*/
}
.l2,
.l2 ~ * {
grid-column:2; /*list two column 2*/
}
.head {
grid-column: 1 / -1; /*use -1 to avoid creating a extra column on mobile*/
min-height: 50px;
}
#media all and (max-width:800px) {
.grid {
grid-template-columns: 1fr; /*one column*/
}
.l2,
.l2 ~ * {
grid-column:1; /*list two column 1*/
}
}
<div class="grid">
<div class="head">Header</div>
<div>List 1</div>
<div>Position 1. List 1 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam ipsa alias molestias accusamus enim veritatis! Pariatur fugiat maiores fuga sed nisi itaque quisquam, recusandae, accusamus cumque. Facilis, ipsum, vitae?</div>
<div>Position 1. List 1</div>
<div>Position 3. List 1</div>
<div class="l2">List 2</div>
<div>Position 1. List 2</div>
<div>Position 2. List 2 <br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, dolorum!</div>
<div>Position 3. List 2</div>
</div>
Like at picture above I need such layout. DIV1 contains static text and to DIV2 data (text) coming from other files (EX.JSON) so it's variable. The point is to keep both divs always with same height based on height of heigher div.
Note: I don't want this with float.
Image courtesy: One of Test I Given Online.
Hi
You can do this easly with CSS3 Flexbox like you asking.
Solution
Here is snippet with working example. I used Flexbox and detalils you have in comments in the code.
#main {
/*Styles for sample presentation*/
padding: 20px;
border: 1px solid tomato;
}
#wrapper {
display: flex;
flex-flow: row wrap;
/* The remaining place (horizontaly) will be spread out around divs in wrapper. */
justify-content: space-around;
/*Styles for sample presentation*/
border: 1px solid royalblue;
}
#wrapper>header {
/* To keep header 100% width. */
flex: 0 0 100%;
text-align: center;
/*Styles for sample presentation*/
background-color: sandybrown;
}
#wrapper>div {
margin: 10px;
padding: 20px;
/* To center the text vertically. */
display: flex;
flex-flow: column nowrap;
justify-content: center;
/*Styles for sample presentation*/
border: 1px solid maroon;
text-align: justify;
}
#text-static {
/*Low flex basis values to keep it next to each other divs*/
flex: 1 0 30%;
}
#wrapper>div#text-json {
/*Low flex basis values to keep it next to each other divs*/
flex: 0 0 25%;
margin-left: 0;
}
<div id="main">
<div id="wrapper">
<header>
Sample header
</header>
<div id="text-static">
Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym,
pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji
druków na komputerach osobistych, jak Aldus PageMaker
</div>
<div id="text-json">
a Lorem Ipsum a Lorem Ipsum a Lorem Ipsum
</div>
</div>
</div>
If you want to try case when right div has more text than left you can edit same snippet as above there.
Knowledge
More informations about CSS3 Flexbox you have e.g. on this W3Schools site.
A nice learning tool that I found recently flexboxfroggy.com .
Hope that was helpful.
Cheers
Here is my implementation using CSS Grid which in my opinion makes this a lot easier especially when working with layouts. I am using SASS for styling. I hope this helps. Here is a link of the snippet on codepen.io
HTML CODE
<div class="main-div">
<div class="wrapper-div">
<div class="sample-header">Header</div>
<div class="div1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta blanditiis, error dolorem, velit tempora, magni ea officiis itaque voluptates aliquid consectetur deserunt quisquam tenetur dolor! Labore assumenda iusto debitis autem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, velit cumque quaerat optio vero sed dolores maxime dolorum aut itaque? Asperiores, esse. Nihil dignissimos nisi debitis molestiae facilis accusamus non! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto quisquam corrupti error nesciunt pariatur quidem, voluptates similique obcaecati magni aperiam autem aliquam ex, ducimus, distinctio amet labore vel blanditiis sapiente. </div>
<div class="div2">Little bit of text here </div>
</div>
</div>
CSS STYLES USING CSS GRID
.main-div{
border:1px solid #000;
width:500px;
margin:0 auto;
padding:10px;
.wrapper-div{
display: grid;
grid-gap: 10px;
grid-template-columns: 3fr 1fr;
background-color: #fff;
// align-items:center;
color: #444;
margin:10px 0;
.sample-header {
grid-column: 1 / 3;
grid-row: 1;
background-color:lightgrey;
padding:10px;
text-align:center;
}
.div1,.div2{
border:1px solid #000;
padding:10px;
display:grid;
align-items:center;
}
.div1 {
grid-column: 1 ;
grid-row: 2 ;
}
.div2 {
grid-column: 2;
grid-row: 2;
}
}
}
https://codepen.io/anon/pen/OQZNgX
On the container for Div 1 & Div 2 apply this CSS
display: flex;
justify-content: center;
And then on the child divs, use flex-basis to specify their width
flex-basis: 75%;
/* and / or */
flex-basis: 25%;
See above code pen link for a working demo!
You can use bootstrap to achieve this... You can see below code for this type of design.
<div class='container'>
<div class='col-md-12 customHeaderclass'>
Your header
</div>
<div class='row'>
<div class='col-md-8'>
Your big content
</div>
<div class='col-md-4'>
Your small content
</div>
</div>
</div>
I hope this code will help you
Thanks & Regards.
I am new here.
I am banging my heads on the keyboard as I spent the last 2 hours trying to solve this problem:
ASSETS: I have a page where I list services using an image on the left, and text on the right. Except... the following service has text on the left and image on the right, so the page looks a little bit like a chequer board. IMAGE-TEXT / TEXT-IMAGE / IMAGE-TEXT.. you get the idea. I used tables to do that. one table and one row per service, two columns for each row.
This is great on desktop; the problem is that when on mobile, my trusty responsive tables act this way: they always put the left column on top of the right column, ignoring the content. The result is that I have IMAGE then TEXT than TEXT then IMAGE etc.., which is confusing when scrolling down on mobiles. We don't know what image relates to what because you would expect a different behaviour: you would want to see IMAGE, then TEXT, then IMAGE, then TEXT etc...
I haven't found any solution to this on the web, possibly because I can't synthesise properly my question in Google! So I thought I asked you. Please any comment and approach to this kind of problem is welcome!
Here's my CSS and HTML:
section-services {
display: table;
width: 100%;
min-height: 100%;
height: inherit;
}
.row-services {
display: table-row;
width: 100%;
height: 100%;
}
.col-left-services, .col-right-services {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {
}
#media all and (max-width: 800px){
section-services{
display:block;
width: 100%;
}
}
#media all and (max-width: 800px){
.row-services,
.col-left-services,
.col-right-services,
.col-left-services:before,
.col-right-services:before{
display:block;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top:10px;
padding-bottom:10px;
}
}
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>
My approach to this is to use display: flex.
Display your DIVs in flex mode and add a class to the second paragraph to force it to the top, like this:
section-services {
display: table;
width: 100%;
min-height: 100%;
height: inherit;
}
.row-services {
display: table-row;
width: 100%;
height: 100%;
}
.col-left-services, .col-right-services {
display: table-cell;
width: 50%;
vertical-align: middle;
}
.col-left-services {
padding-right: 10px;
}
.col-right-services {
padding-left:10px;
}
.content-services {
}
#media all and (max-width: 800px){
section-services{
display:block;
width: 100%;
}
}
#media all and (max-width: 800px){
.row-services,
.col-left-services,
.col-right-services,
.col-left-services:before,
.col-right-services:before {
display:flex;
-webkit-display:flex;
-moz-display:flex;
flex-direction: column;
-webkit-flex-direction: column;
-moz-flex-direction: column;
width: 100%;
margin-left: auto;
margin-right: auto;
padding-top:10px;
padding-bottom:10px;
}
.col-floated {
order: -1;
-webkit-order: -1;
-moz-order: -1;
}
}
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<h2 style="text-align: center;">RED FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
<div class="col-right-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6873.jpg" />
</div>
</div>
</div>
</section-services>
<section-services>
<div class="row-services">
<div class="col-left-services">
<div class="content-services">
<img src="http://buyersguide.caranddriver.com/media/assets/submodel/6866.jpg" />
</div>
</div>
<div class="col-right-services col-floated">
<div class="content-services">
<h2 style="text-align: center;">YELLOW FERRARI</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed haec quidem liberius ab eo dicuntur et saepius. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest.
</div>
</div>
</div>
</section-services>
I've attached an illustration to help me get my point across!
So, DIV 1 and DIV 2 (children of PARENT DIV) are columns on a page I'm building, and the content within them is not of the same height, so currently their buttons do not line up vertically.
I need to vertically align BUTTON 1 and BUTTON 2 (I guess to the bottom of PARENT DIV?);
How do I go about this please?
Thanks!
I don't think you can get away from the position CSS directive, but if you don't want to use bottom, there are numerous jQuery examples that will allow you to logically place your divs.
Alternately (and I know you seem to want to use Divs) but you may be able to use a table easier.
You can apply position relative and a bottom padding in DIV 1 and DIV 2 to prevent its content to overlap the buttons, whose position should be absolute (maybe bottom: 10px according to your screenshot).
Example: jsfiddle.net/yy87qdmt/1/
Tested & proofed in firefox-45 and chrome-50
<body>
<main>
<style scoped>
main
{
flex-direction: row;
display: flex;
}
main > figure
{
border: 1px darkgrey solid;
justify-content: flex-end;
flex-direction: column;
box-sizing: border-box;
display: flex;
}
main > figure > :first-child
{
background-color: lightgrey;
flex-grow: 1;
}
main > figure > figcaption
{
background-color: black;
color: lightgrey;
flex-shrink: 1;
}
</style>
<figure>
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
<figcaption>
Caption 0
</figcaption>
</figure>
<figure>
<article>
<p>Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur...</p>
<p>...Lorem ipsum dolor sit amet cosectetur</p>
</article>
<figcaption>
Caption 1
</figcaption>
</figure>
</main>
</body>
Flexbox can do that.
.row {
display: flex;
width: 80%;
margin: auto;
}
.col {
width: 50%;
border: 1px solid grey;
text-align: center;
padding: 1em;
}
img {
width: auto;
max-height: 100%;
}
p {
text-align: justify;
}
/* the magic */
.col {
display: flex;
flex-direction: column;
}
button {
margin-top: auto;
}
<div class="row">
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, dignissimos.</p>
<button>My button</button>
</div>
<div class="col">
<h2>My Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae excepturi autem laborum veritatis ipsam odio itaque, dolorem modi ipsum voluptatibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque assumenda error blanditiis aliquam
repellendus, necessitatibus doloribus ipsa eveniet natus laborum.</p>
<button>My button</button>
</div>
</div>