JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="DemoCtrl">
    <div class="leftViewNav leftNav leftBound">
    <div>
        <ul class="list-unstyled">
            <li ng-repeat= "leftNavTag in leftNavTags"><p>{{ leftNavTag.title }}</p></li>
            <li><p>add</p></li>
        </ul>
    </div>
    </div>
</div>

CSS

.leftBound div ul li{
    position: relative;
    height: 5%;
    float: left;
    background-color: #C4C2C3;
    border-right: 1px solid #000;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
/* line 50, ../sass/main.scss */
 .leftBound div ul li li:first-child:nth-last-child(1), .leftBound div ul li:first-child:nth-last-child(1) ~ li {
    width: 100%;
}
/* line 50, ../sass/main.scss */
 .leftBound div ul li li:first-child:nth-last-child(2), .leftBound div ul li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}
/* line 50, ../sass/main.scss */
 .leftBound div ul li:first-child:nth-last-child(3), .leftBound div ul li:first-child:nth-last-child(3) ~ li {
    width: 33.33333%;
}
/* line 50, ../sass/main.scss */
 .leftBound div ul li:first-child:nth-last-child(4), .leftBound div ul li:first-child:nth-last-child(4) ~ li {
    width: 10%;
}

JavaScript

var app = angular.module('myApp', []);

app.controller('DemoCtrl', function ($scope) {

    $scope.leftNavTags = [{
        title: 'Analysis',
    }, {
        title: 'Log',
    }, {
        title: 'Edit',
    }];
});