JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container" style="height:100%">

        <!-- Page Header -->
        <div class="row">
            <div class="col-lg-12">
                <div class="headerSplit">qwqw</div>
                <div class="headerSplit">qwqw</div>
            </div>
        </div>
        <!-- /.row -->

        <!-- Projects Row -->
        <div class="row">
            <div class="col-md-9 chessboardWrap">
                <div class="chessGrid1 chessGrid"></div>
                <div class="chessGrid2 chessGrid"></div>
                <div class="chessGrid1 chessGrid"></div>
                <div class="chessGrid2 chessGrid"></div>
                <div class="chessGrid1 chessGrid"></div>
                <div class="chessGrid2 chessGrid"></div>
                <div class="chessGrid1 chessGrid"></div>
                <div class="chessGrid2 chessGrid"></div>
                <div class="chessGrid1 chessGrid"></div>                
            </div>
            <div class="col-md-3 portfolio-item">
                
                <h3>
                    <a href="#">Project Two</a>
                </h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
            </div>
        </div>
        <!-- /.row -->

        
    </div>

CSS

body, html {
    padding:0;
	margin:0;
	height:100%;
	font-size:100%;
}

.portfolio-item {
    margin-bottom: 25px;

}

.chessGrid { height:100px;}

.chessGrid1, .chessGrid2 {
	width:11.11%;
	float:left;
	text-align:center;
	display:block;
}

.chessGrid1 {
	background-color:white;
}

.chessGrid2 {
	background-color:#dcdcdc;
}

.chessGrid1:after {
	content: "\265A"; 
}

.chessGrid2:after {
	content: "\2655"; 
}

.chessboardWrap {
	height:100%;
	border:2px solid #ccc;
	box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

.col-md-9 {
	padding:0;
}