Two columns with one header layout with CSS3 Flexbox - css

Question

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.

Answer 1

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

Answer 2

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;
}
}
}

Answer 3

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!

Answer 4

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.