Chapter-Details

HTML

<div class="container">
    <div class="row chapter-detail">
        <div class="col-xs-4 col-sm-2 col-md-2 col-lg-1 no-padding ">
            <div class="ch-d-wrapper">
                <div class="ch-d-chapter ">CHAPTER</div>
                <div class="ch-d-num">6</div>
            </div>
        </div>
        <div class="col-xs-8 col-sm-10 col-md-10 col-lg-11 no-padding ">
            <div class="ch-d-name">Integers and the Coordinate Plane</div>
        
        </div>
         
    </div>
</div>

SCSS

.chapter-detail {

    border: solid #c9cacb 1px;
    background-color: #F9F9F9;
    color: #293644;
    margin-bottom: 10px;
    margin-left: 3px;
    margin-right: 35px;
    margin-top: 30px;
    line-height: 38px;

    .ch-d-wrapper {
        text-align: center;
        border-right: solid #c9cacb 2px;
    }
    .ch-d-chapter{
        text-transform: uppercase;
        font-size: 12px;
    }
    .ch-d-num {
        font-weight: bold;
        font-size: 35px

    }
    .ch-d-name {
        line-height:70px;
        font-size: 23px;
        vertical-align: middle;
    }
}