JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div class="square">
  <div class="first-half"></div>
  <div class="second-half">
    <div class="buttons"></div>
    <div class="ellipsis-container">
      <p>Restaurant - Au Joyeux Codeur</p>
    </div>
  </div>
</div>

CSS

.square
{
  background-color : #000;
	height: 48vw;
	width: 48vw;
}

@media only screen and (min-width: 601px)
{
	.square
	{
	height: 32vw;
	width: 32vw;
	}
}

@media only screen and (min-width: 993px)
{
	.square
	{
	height: 15vw;
	width: 15vw;
	}
}

.first-half
{
  height: 50%;
  background-color: #3f51b5;
}

.buttons
{
  height: 30px;
  background-color: #ffc107;
}

.ellipsis-container
{
  background-color: #f44336;
}
.ellipsis-container > p
{
  margin: 0;
  font-size: 1.5rem;
}