Bootstrap text overlay balancing

Question

I have a line with three images and text overlaying them. I do not seem to see the left and right parts of the text being balanced in separate sections. It should look like this:

I can correctly get the text on the left, but I can not balance the text on the right and set the vertical channel between sections with a right or left border.

.practice-areas { h1 { font-weight: 600; font-size: 60px; font-family: 'Open Sans Condensed'; text-transform: uppercase; color: #ffffff; position: absolute; bottom: 10%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-font-smoothing: antialiased; } h5 { text-transform: uppercase; color: #ffffff; position: absolute; bottom: 10%; left: 65%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-font-smoothing: antialiased; } p { font-family: 'Open Sans Condensed'; font-size: 20px; text-transform: uppercase; color: #ffffff; position: absolute; bottom: 10%; left: 55.4%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); -webkit-font-smoothing: antialiased; } .result { color: $grey; bottom: 7%; font-size: 16px; right: 38%; } .square-1 { background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150'); background-size: cover; height: 413px; @include breakpoint(xsmin) { height: 213px; } } .square-2 { background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150'); background-size: cover; height: 413px; @include breakpoint(xsmin) { height: 213px; } } .square-3 { background-image: url('https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150'); background-size: cover; height: 413px; @include breakpoint(xsmin) { height: 213px; } } } 

  <div class="row practice-areas"> <div class="row practice-areas"> <div class="col-lg-12"> <div class="col-lg-4 square-1"> <div class="left"> <h1 class="amount">$90.2</h1> <p class="million">million</p> <p class="result">text</p> </div> <div class="right"> <h5 class="case">COMPANY NAME</h5> </div> </div> <div class="col-lg-4 square-2"> <h1>$90.2</h1> <p>million</p> <p class="result">company</p> </div> <div class="col-lg-4 square-3"> <h1>$90.2</h1> <p>million</p> <p class="result">COMPANY</p> </div> </div> </div> </div> 

Answer 1

If you use bootstrap V3, then it will be so. I do not know that you are using Bootstrap 3 or 4. Also your HTML structure is incorrect.

 @import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700"); .practice-areas h1 { font-weight: 600; font-size: 60px; font-family: 'Open Sans Condensed'; text-transform: uppercase; color: #ffffff; line-height: 35px; margin-bottom: 10px; margin-top: 0; text-align: right; -webkit-font-smoothing: antialiased; } .practice-areas h5 { text-transform: uppercase; color: #ffffff; font-family: 'Open Sans Condensed'; margin-top: 0; margin-bottom: 0; text-align: left; -webkit-font-smoothing: antialiased; } .practice-areas p { font-family: 'Open Sans Condensed'; font-size: 20px; line-height: 20px; text-transform: uppercase; margin-bottom: 0; text-align: right; color: #ffffff; -webkit-font-smoothing: antialiased; } .practice-areas .result { color: #f6f6f6; font-size: 16px; } .practice-areas .square-1 { background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150"); -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 300px; } .practice-areas .square-2 { background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150"); -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 300px; } .practice-areas .square-3 { background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&w=350&h=150"); -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 300px; } .practice-areas .square { bottom: 20px; display: table; left: 0; position: absolute; width: 100%; } .practice-areas .square-1, .practice-areas .square-2, .practice-areas .square-3 { -webkit-transition: background-color 0.3s ease-in-out 0s; -o-transition: background-color 0.3s ease-in-out 0s; -moz-transition: background-color 0.3s ease-in-out 0s; transition: background-color 0.3s ease-in-out 0s; } .practice-areas .square-1:hover, .practice-areas .square-1:focus, .practice-areas .square-2:hover, .practice-areas .square-2:focus, .practice-areas .square-3:hover, .practice-areas .square-3:focus { background-color: #FAE2E1; background-image: none; } .practice-areas .square-1 .left, .practice-areas .square-1 .right, .practice-areas .square-2 .left, .practice-areas .square-2 .right, .practice-areas .square-3 .left, .practice-areas .square-3 .right { display: table-cell; height: auto; text-align: center; padding-left: 15px; padding-right: 15px; vertical-align: top; width: 50%; } .practice-areas .square-1 .left, .practice-areas .square-2 .left, .practice-areas .square-3 .left { border-right: 1px solid #ffffff; } .practice-areas .square-1 .right, .practice-areas .square-2 .right, .practice-areas .square-3 .right { border-left: 1px solid #ffffff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row practice-areas"> <div class="col-sm-4 square-1"> <div class="square"> <div class="left"> <h1 class="amount">$90.2</h1> <p class="million">million</p> <p class="result">text</p> </div> <div class="right"> <h5 class="case">COMPANY NAME</h5> </div> </div> </div> <div class="col-sm-4 square-2"> <div class="square"> <div class="left"> <h1 class="amount">$90.2</h1> <p class="million">million</p> <p class="result">text</p> </div> <div class="right"> <h5 class="case">COMPANY NAME</h5> </div> </div> </div> <div class="col-sm-4 square-3"> <div class="square"> <div class="left"> <h1 class="amount">$90.2</h1> <p class="million">million</p> <p class="result">text</p> </div> <div class="right"> <h5 class="case">COMPANY NAME</h5> </div> </div> </div> </div> </div> 

Answer 2

Flexbox to the rescue. I structured each section as shown below. The rest was applied via css.

 <div class="wrap"> <div class="left"> <h1 class="amount">$90.2</h1> <p class="million">million</p> <p class="result">text</p> </div> <div class="right"> <h5 class="case">COMPANY NAME</h5> <p class="lipsum">lipsum</p> <p class="date">date</p> </div> </div> 

https://jsfiddle.net/ke5octvj/