Chat | looks

by Kirubel Girma

HTML

<div class="chstco">
  <div class="ch_head_l">
    <div class="uservar">
      <img alt="" class="ximg" src="https://avatars3.githubusercontent.com/u/8961475?v=3&u=c78f57cc515cb0df58fcae558b7c71702d9d235d&s=400">
    </div>
    <div class="xmsg">This is awesome i like to change the layout to more engaging one</div>
  </div>
</div>
<div class="chstco">
  <div class="ch_head_r">
    <div class="uservar">
      <img alt="" class="ximg" src="https://avatars3.githubusercontent.com/u/8961475?v=3&u=c78f57cc515cb0df58fcae558b7c71702d9d235d&s=400">
    </div>
    <div class="xmsg">This is awesome</div>
  </div>
</div>

CSS

* {
  font-family: arial;
}

body {
  height: 100%;
  width: 100%;
  margin: 0em;
  postion: absolte;
}

.chstco {
  width: 100%;
  min-height: 4em;
}

.ch_head_l {
  padding-left: 3em;
  display: inline-block;
  min-width: 14em;
  color: #7f94a1;
  cursor: pointer;
  float: right;
  font-size: .8em;
  margin: .5em;
}

.ch_head_r {
  display: block;
  min-width: 14em;
  color: #7f94a1;
  cursor: pointer;
  float: left;
  font-size: .8em;
  margin: .5em;
}

.uservar {
  height: 3.3em;
  width: 3.3em;
  /* padding: 0; */
  display: inline;
}

.ximg {
  border: .2em solid white;
  border-radius: 50%;
  height: 3em;
  float: left;
}

.xmsg {
  color: white;
  padding: .4em;
  display: block;
  min-height: 2.2em;
  min-width: 8.5em;
  max-width: 24em;
  margin: 0.5em 0em 0em 3.9em;
  background: cornflowerblue;
}