Bootstrap CSS stacking text - html

Question

I'm trying to stack text in a Bootstrap column but can't quite figure out how I would go about doing it.
Here's a crude mockup of what I'm trying to achieve:
The first word "THE" should take up 2 lines, while the 3 "SOMETHINGS" are 1 line each. Also is there a way to stretch the "SOMETHINGS" out to equal length if they were different words?
<div class="row">
<div class="col-lg-6">
<img class="img-responsive" src="img/logo.png"</img>
</div>
<div class="col-lg-6">
THE SOMETHING SOMETHING SOMETHING
</div>
</div>

Answer 1

Below is a start if you must use Bootstrap columns. If you adjust column sizing or font or text used, then adjust the font-sizes, line-heights and letter-spacing values.
Font-size mostly helped fill the view vertically, line-height assisted with vertical alignment, and letter-spacing helped the horizontal spacing for text (with 'SOMETHING' being the baseline length for this col size). I tweaked the numbers so it looked nice within the jsFiddle output, but on your site you should adjust the values as needed and wrap it accordingly so you don't get any unexpected output (stacking columns when view becomes smaller).
If you need it to be more flexible, you can create a function to calculate the measurements depending on each word length/col size. Your font family and words chosen will not be what I chose, so your mileage may vary.
If anyone else has a better solution without the use of external existing libraries, then please share! I'd like to know.
Output from my browser:
See jsFiddle
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.col-xs-4,
.col-xs-8 {
margin: 0;
padding: 0;
}
.content-text {
width: 100%;
}
#content-text-THE {
float: right;
font-size: 10.0vh;
line-height: 0.75em;
}
#content-text-top {
float: left;
font-size: 5vh;
line-height: 0.7em;
letter-spacing: 1.04em;
}
#content-text-mid {
float: left;
clear: left;
font-size: 5vh;
line-height: 0.8em;
letter-spacing: 0.08em;
}
#content-text-bot {
font-size: 5vh;
line-height: 0.8em;
letter-spacing: 0em;
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<span id="content-text-THE">THE</span>
</div>
<div class="col-xs-8">
<div class="content-text">
<span id="content-text-top">COOL</span>
</div>
<div class="content-text">
<span id="content-text-mid">ESPRESSO</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-8">
<div class="content-text">
<span id="content-text-bot">SOMETHING</span>
</div>
</div>
</div>
</div>