CSS Float 7

float box. set boxb width and height ristriction.

by rough cheap

HTML

<div class="container clearfix">
  <div class="left boxa imgbox">
    image box width 100px, height 100px.
  </div>
  <div class="left boxb description">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Morbi tristique sapien ac erat tincidunt, sit amet dignissim
    lectus vulputate. Donec id iaculis velit. Aliquam vel
    malesuada erat. Praesent non magna ac massa aliquet tincidunt
    vel in massa. Phasellus feugiat est vel leo finibus congue.
  </div>

</div>

CSS

html {
  font-size: 14px;
}

div {
  box-sizing: border-box;
}

.left {
  float: left;
}

.right {
  float: right;
}

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

.imgbox {
  width: 100px;
  height: 100px;
}

.description {
  width: calc(100% - 100px);
  height: 100px;
}

.container {
  padding: 0.5rem;
  width: 400px;
  background-color: rgb(196, 196, 196);
}

.boxa {
  background-color: rgb(255, 196, 196);
}

.boxb {
  background-color: rgb(196, 255, 196);
}

.boxc {
  background-color: rgb(196, 196, 255);
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt")
})