Star and Bars

by Mark Nelson

HTML

<div class='starAndBars'>
    <div class='leftBar'>
        <div class='barTop'></div>
        <div class='barBottom'></div>
    </div>
    <div class='rightBar'>
        <div class='barTop'>
            <div class="star">*</div>
        </div>
        <div class='barBottom'></div>
    </div>
</div>

CSS

.starAndBars {
    display:inline-block;
    width: 108px;
    height: 130px;
}
.leftBar {
    width: 28%;
    height: 100%;
    margin-left:11%;
    float: left;
}
.leftBar .barTop {
    height: 55%;
    width: 100%;
}
.leftBar .barBottom {
    height: 45%;
    width: 100%;
    background: gray;
}
.rightBar {
    width: 28%;
    height: 100%;
    float: left;
    margin-left: 22%;
    margin-right:11%;
}
.rightBar .barTop {
    height: 25%;
    width: 100%;
    text-align: center;
}
.rightBar .barBottom {
    height: 75%;
    width: 100%;
    background: gold;
}
.star {
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    color: gold;
}