<div class="container"><div class="left-div left-text">Foo</div><div class="right-div right-text">Barrrrrr</div></div>
body
{
background-color: #fcfcfc;
}
.container
{
text-align: center;
padding: 15px;
}
.left-div
{
display: inline-block;
max-width: 300px;
text-align: left;
padding: 30px;
background-color: #ddd;
border-radius: 3px;
margin: 15px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 150px;
text-align: left;
padding: 30px;
background-color: #ddd;
border-radius: 3px;
margin: 15px;
}
.left-text, .right-text
{
color: #333;
}
@media screen and (max-width: 600px)
{
.left-div, .right-div
{
max-width: 100%;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.