<div class="container">
<div class="column-1 box">
<h1>What is Lorem Ipsum?</h1>
<p>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged
</p>
</div>
<div class="column-2 box">
<h1>What is Lorem Ipsum?</h1>
<p>
What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged
</p>
</div>
</div>
:root {
box-sizing: border-box;
}
body {
margin: 0;
padding: 1rem;
max-width: 1200px;
margin: 30px auto;
}
h1 {
font-family: cursive;
}
.container {
display: flex;
width: 100%;
}
.column-1 {
flex-shrink: 0; /* shrinks to 0 to apply 70% width*/
flex-basis: 70%; /* sets initial width to 70%*/
}
.box {
background-color: rgb(245, 215, 160);
padding: 10px;
border-radius: 12px;
border: 2px solid rgb(116, 113, 113);
margin: 1rem;
box-shadow: 1px 1px 1px #000;
}
@media only screen and (max-width: 900px) {
.container {
flex-direction: column;
}
.box {
margin: 0 0 1rem;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.