CSS Float 2

MDN Sample

by rough cheap

HTML

<div class="container">
  <div class="left boxa">
    image box
  </div>
  <div class="left boxb">
    <p>
    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.
  </p>
  </div>
  
</div>

CSS

html {
  font-size: 14px;
}

div {
  box-sizing: border-box;
  width: 120px;
  height: 150px;
}

.left {
  float: left;
}

.right {
  float: right;
}

.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")
})