.border-boxed {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
box-sizing: border-box;
background: linear-gradient(135deg,
rgba(85,239,203,1) 0%,
rgba(30,87,153,1) 0%,
rgba(85,239,203,1) 0%,
rgba(91,202,255,1) 100%);
color: #f7f7f7;
font-family: 'Lato', sans-serif;
font-weight: 300;
font-size: .8rem;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 25%;
height: 25%;
border: 2px solid #f7f7f7;
border-radius: 16px;
margin: .5rem;
text-transform: uppercase;
text-align: center;
}
.small {
height: 8%;
}
<div class="box large flexitem flex-center">
Large Box. <br>
So big. <br>
My god.
</div>
<div class="box small flexitem flex-center">
Smaller Box
</div>