position text by baseline's top-left

Instead of positioning a box with text by top and left, we want to set the top and left coordinates of the text baseline

by Vasil Svetoslavov

HTML

<div id="test">

  <div id="text1">
    <div id="text1inner">
      Hello World
    </div>
  </div>
</div>

<div class="grid">
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
</div>

CSS

#text1 {
  background-color: transparent;
  height: 0;
  top: 10mm;
  left: 10mm;
  display: block;
  position: relative;
  border-top: 1px dashed black;
  overflow-y: visible;
}

#text1inner {
  position: absolute;
  bottom:0;
  vertical-align:baselinie;
  font-size: 12px;
}
#test {
  z-index:1000;
}
.grid {
  z-index:10;
}
.grid .square {
  border-right: 1px dashed gray;
  border-bottom: 1px dashed gray;
  width: 1cm;
  height: 1cm;
  display: block;
  float:left;
  vertical-align:baseline;
}