Как разместить блок относительно элемента?

Код: jsfiddle.net/2x1wbo8q
При клике должен появляться зеленый блок, расположенный относительно синего, как показано на картинке. Как написать css зеленого блока?

  <div class="b"><span id="click">click me</span></div>

.b {
    margin-top: 200px;
    width: 100%;
    height: 20px;
    background: red;
}

#click {
    background: blue;
}