Aligning items

Flex align items

by Checha Man

HTML

<div id="root">
  <div class="elem">
    <div id="toprig">
      <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Thumbs-UpSmiley-icon.png">
    </div>
  </div>
  <div class="elem bottom">
   <!-- <div id="botlef">
      <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Thumbs-UpSmiley-icon.png">
    </div> -->
    <div id="botrig">
      <img src="http://icons.iconarchive.com/icons/iconsmind/outline/32/Thumbs-UpSmiley-icon.png">
    </div>
  </div>
</div>

CSS

#root {
  border: 1px solid blue;
  height: 80px;
  width: 100px;
  display: block;
}
.elem {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
}
#toprig {
  align-self: flex-end;
  border: 2px solid pink;
  border-radius: 50%;
}
#botlef {
  border: 2px solid red;
  border-radius: 50%;
  order: 1;
}
#botrig {
  border: 2px solid green;
  border-radius: 50%;
}