Untitled

dabblet.css

**
 * The first commented line is your dabblet’s title
 */
.wrapper {
   position: relative;
}

.line {
    position: absolute;
    height: 1px;
    width: 100%;
    background-color: white;
}

.line.top {
	top: 53px;
}

.line.bottom {
	top: 65px;
}

p.a {
	background-color: steelblue;
}

p.b {
	background-color: lightgray;
}

p {
    margin: 0;
    
    height: 100px;
    font-size: 20px;
    font-family: 'Lucida Grande';
    color: white;   
}

span {
  /* can be any value to change text height inside p without pushing down the next element */
  line-height: 100px;
}

dabblet.html

<div class="wrapper">
	<p class="a"><span>Here is some text</span></p>
	<div class="line top"></div>
	<div class="line bottom"></div>
	<p class="b">I am not pushed down when above span's line-height changes.</p>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"80","seethrough":"","prefixfree":"1","page":"all"}