fake 2 colums in one div and separate center using :before

dabblet.css

/* fake 2 colums in one div and separate center using :before
https://gist.github.com/gcyrillus  */
div {
/* preparation visuel facultative pour l'exemple */
border:ridge 3px;
min-height:200px;
width:410px;
margin:3em auto;
padding:5px;
background:#ddd;
text-align:center;

/* coupure visuelle en 2 du div */
position:relative;
float:left;
margin:2em;;
}

/* mise en place de la bordure centrale */
div:before {
content:'';
position:absolute;
top:-3px;
bottom:-3px;
left:50%;
margin-left:-5px;
width:6px;
background-image:
-moz-linear-gradient(90deg,white 10%, green,red, white 90%);
background-image:
-webkit-linear-gradient(90deg,white 10%, green,red, white 90%);
background-image:
-o-linear-gradient(90deg,white 10%, green,red, white 90%);
background-image:
-ms-linear-gradient(90deg,white 10%, green,red, white 90%);
background-image:
linear-gradient(90deg,white 10%, green,red, white 90%);
border-left:3px groove;
border-right:3px ridge;
}

/* bouquin ? */
div.book:before {
border:none;
background-image:
-moz-linear-gradient(0,#ccc 0%, #aaa 49.5%,black 50%, #aaa 50.5% , #ccc 100%);
background-image:
-webkit-linear-gradient(0,#ccc 0%, #aaa 49.5%,black 50%, #aaa 50.5% , #ccc 100%);
background-image:
-o-linear-gradient(0,#ccc 0%, #aaa 49.5%,black 50%, #aaa 50.5% , #ccc 100%);
background-image:
-ms-linear-gradient(0,#ccc 0%, #aaa 49.5%,black 50%, #aaa 50.5% , #ccc 100%);
background-image:
-moz-linear-gradient(0,#ccc 0%, #aaa 49.5%,black 50%, #aaa 50.5% , #ccc 100%);
border-radius:1em;
width:10px;
}
p {display:inline-block;
width:196px;
padding:0 0 0 14px;
text-align:left;
}
p:first-child {padding:0}

dabblet.html

<div>
<p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? </p>
<p>Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</p>	
	</div>
<div class="book">
<p>Itaque verae amicitiae difficillime reperiuntur in iis qui in honoribus reque publica versantur; ubi enim istum invenias qui honorem amici anteponat suo? </p>
<p>Quid? Haec ut omittam, quam graves, quam difficiles plerisque videntur calamitatum societates! Ad quas non est facile inventu qui descendant. Quamquam Ennius recte.
</p>	
	</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}