Using absolute position to achieve four simple layouts

Question

I am trying to get four different layouts, some text with any other text on the left, right, top or bottom.

I have this code:

<div>
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>

Then this CSS

div { background: grey; position: absolute;}
.icon {font-family: calibri; position: absolute;}
//.text {padding-left: 15px;} .icon {left: 0;} // Icon left of text
//.text {padding-right: 15px;} .icon {right: 0;} //Icon right of text
//.text { padding-top: 15px; } .icon {top: 0;} // Icon top of text
//.text { padding-bottom: 15px; } .icon {bottom: 0;} // Icon bottom of text

Then, depending on which of the last four lines that I have broken, should determine the position of the icon text relative to the main text. However, it does not seem to work, and I can actually reach the position of "Icon left of text".

Can someone explain where I'm wrong.

Answer 1

You have two problems that affect the result:

Incorrect comments

CSS /**/, //, , / .

.text .icon inline

.text .icon span, inline . inline top bottom padding, . , .text .icon block.

div {
  background: grey;
  position: absolute;
}
.icon {
  font-family: calibri;
  position: absolute;
}
span {
  display: block;
}

.left {
  top: 0;
}
.left .text {
  padding-left: 15px;
}
.left .icon {
  left: 0;
}

.right {
  top: 3em;
}
.right .text {
  padding-right: 15px;
}
.right .icon {
  right: 0;
}


.top {
  top: 6em;
}
.top .text {
  padding-top: 15px;
}
.top .icon {
  top: 0;
}


.bottom {
  top: 9em
}
.bottom .text {
  padding-bottom: 15px;
}
.bottom .icon {
  bottom: 0;
}

<div class="left">
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>
<div class="right">
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>
<div class="top">
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>
<div class="bottom">
  <span class="icon">H</span>
  <span class="text">Hello</span>
</div>