JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<div class="container">
<div class="left boxa">
This is a pen.
</div>
<div class="left boxb">
This is an apple.
</div>
<div class="left boxc">
This is last one. and its overflow.
</div>
</div>

CSS

div {
  box-sizing: border-box;
}

.container {
  background-color: #dededf;
  padding: 1rem;
}

.container::before, .container::after {
  content: "";
  clear: both;
  display: block;
}

.left {
  float: left;
}

.boxa {
  background-color: #d6f6d6;
  width: 200px;
}

.boxb {
  background-color: #f6d6d6;
  width: 400px;
}


.boxc {
  background-color: #f6f6d6;
  width: 100%;
}

Vue

var app = new Vue({
	el : '#app',
  data : {
  	message : 'H'
  }
});