CSS Float 4

float box. typically.

by rough cheap

HTML

<div class="container clearfix">
  <div class="left boxa imgbox">
    image box
  </div>
  <div class="left boxb">
    Lorem ipsum dolor sit amet
  </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;
}

.container {
  padding: 0.5rem;
  width: 100%;
  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")
})