JSFiddle - React, Tailwind, and code Playground

HTML

<div class="home view">
	<div class="container">
		<header>
			<h4>stuff</h4>
		</header> 
        <div some-boxes class="four columns bookitem" ng-repeat="book in books"></div>
    </div>
</div>

CSS

.container .four.columns                    
{
	width: 200px;
	height:220px;
	margin:5px;
}

.container .bookitem
{
	background-color:grey;
   /* border: 1px solid black;*/
}

JavaScript

app.controller('homeController', function ($scope, booksService)
{
	init();
    
	function init()
	{
		$scope.states = {};
		$scope.states.activeItem = 'book1';
		$scope.books = booksService.getBooks();
	}
});

app.directive('someBoxes', function()
{
	return function(scope, element, attrs)
	{
		element.css('border', '1px solid white');
		//element.css('width', '200px');
		
		var body = angular.element(document).find('.bookitem');
		console.log(body[0].offsetWidth);

		if(scope.$last)
		{
			//console.log("element name is: " + element.attr("class"));
			//console.log("element is: " + element);
			//console.log($(".bookitem").children("div").attr("class"));
			//console.log($('.container').children('div').attr('class'));
		}
	};
});