"Align" elements by colon (":")

by ctwheels

HTML

<div id="left">
    <div>Name</div>
    <div>Email</div>
    <div>Birthday</div>
    <div>Gender</div>
</div>
<div id="right">
    <div>John Doe</div>
    <div>[email protected]</div>
    <div>January 01, 1971</div>
    <div>Male</div>
</div>

CSS

div{
    color:#05BEE3;
}

#left {
    float:left;
}
#left>div{
    text-align:right;
}
#left>div:after{
    content:":";
}
#right {
    float:left;
    margin-left:10px;
}