JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">

	<div class="col-md-6">

		<div class="structure">

			<div class="storey">

				<a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px); background-color: #e8e0b5;"> <span>Item 1</span>


				</a> <a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px); background-color: #fa83f1;"> <span>Item 2</span>


				</a> <a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px); background-color: #49F8D0;"> <span>Item 3</span>


				</a> <a href="#" class="room" style="height: 155.60px; width: calc(25.0% - 4px); background-color: #49b3eb;"> <span>Item 4</span>

				</a>

				<!--
                        <span style="clear: left;"></span>
-->
			</div>
		</div>
	</div>

	<div class="col-md-6">

		<div class="row">

			<div class="col-sm-12"><p>This is another row</p></div>

		</div>
	</div>
</div>

CSS

.room {
	display: block;
	text-align: center;
	margin: 2px;
	float: left;
	border-radius: 12px;
}

.room span {
	display: block;
	color: black;
}