Text box with image

by zircon

HTML

<!-- tested in Moon+, ADE, Pocketbook, Alkido ereader app -->
<div class=" pinebox clearfix">
  <img class="image" src="https://i.postimg.cc/nzygRJMk/box1.jpg" width="80" height="80"/>
  <p class="text">Lorem ipsum dolor sit amet, consec tetur adipi scing elit. Morbi tris tique sapien ac erat tinc idunt, sit amet dign issim lectus vulpu tate. Donec id iaculis velit. Aliquam vel male suada erat. Prasent non magna ac massa.</p>
</div>

CSS

html, body {
  height: 100%;
  font-family: serif;
  font-size: 1em;
}
* {
  box-sizing: border-box;
}
.pinebox {
  margin: 0px;
  padding: 5px;
  background-color: #04AA6D;
  text-align: left;
}
.text {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-start;
  margin: 0px;
  padding: 10px;
  color: #fff;
  text-align: left;
  background-color: #04AA6D;
}
.image {
  float: right;
  height: 80px;
  width: 80px;
  max-width: 80px;
  margin: 0px;
  padding: 0px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}