<div class="container">
<div class="child first"></div>
<div class="child second">Some text</div>
<button class="child call-to-action">Call to action</button>
  <div class="child fourth">
    <span class="important">Important text</span>
    <div class="lessimportant">less important text</div>
    </div>
  </div>

*{box-sizing: border-box;}

button:{
    border: none
    text-decoration: none;
    -webkit-appearance: none;
-moz-appearance: none;  
  line-height:inherit;
}

.child{
  padding:1vw;
  width:23vw;
  height:7vw;
  text-align:center;
  font-size:calc(12px + 1.5vw);
  font-family:arial;
}

.container{
  display:flex;
  justify-content:space-around;
}

.first{
background-color: hsl(155, 30%, 80%);
}
.second{
background-color: hsl(155, 30%, 80%);
  color: hsl(155, 30%, 5%);
}
.call-to-action{
background-color: hsl(155, 80%, 60%);
  color: hsl(155, 30%, 5%);
  border-width: 0px;
  display:block;
  border-radius:4vw;
}
.fourth{
background-color: hsl(155, 30%, 80%);
  color: hsl(155, 30%, 5%);
  height: calc(50px + 3.5vw);;
}
.lessimportant{
  color: hsl(155, 15%, 40%);
  font-size:calc(10px + 1vw);
}
@media (max-width: 600px){
  .container{
    flex-direction:column;
    height:70vw;
  }
  .child{
    width:100%;
    height:12vw;
  }
  .fourth{
    height:18vw;
  }
  .call-to-action{
    border-radius:6vw;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.