JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    	<div class="banner">
            <div class="block1">
                <p>Choreographers</p>
            </div>
            <div class="block1">
                <p>Farm Houses</p>
            </div>
        </div>
    </div>
    <div style="clear:both"></div>
    <div class="container">
    	<div class="banner">
            <div class="block2">
                <p>Choreographers</p>
            </div>
            <div class="block2">
                <p>Farm Houses</p>
            </div>
        </div>
    </div>

CSS

.container{
		width:100%;
		margin:0 auto;
		max-width:991px;
	}
	.banner{
		padding:20px;
	}
	.block1{
		float:left;
		width:25%;
		text-align:center;
	}
  .block2{
    float:left;
    width:25%;
    text-align:center;
  }
  
  .block2 p{
    white-space:nowrap;
    overflow:hidden;
	  text-overflow:ellipsis;
		width:98%;
  }