Align vertically rotated text with horizontal text

Question

I play with some vertical text as a range inside a title element. The problem is that I cannot figure out how to eliminate the space created between the vertical spacing and the rest of the text content.

Looking at the violin, I am looking to hide “We're just” next to S in Small and “Pursuit of A” next to “B” in Big Feeling.

Now it looks like this:

What i want to do

HTML:

<h2>
 <span class="smallVertical orangeText">We're Just A</span>
 Small<br/>Company<br/>
 <span class="smallVertical">Striving For A</span>
 <span class="orangeText">Big Feel</span>
</h2>

CSS:

@import 'https://fonts.googleapis.com/css?family=Oswald';

h2 {
  text-align:right;
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  font-size:8em;
  line-height:1.1em;
}

h2 span.smallVertical {
  font-size:12%;
  transform: rotate(-90deg);
  letter-spacing:0.1em;
  float:left;
}

h2 span.orangeText {
  color:#FF9900;
}

Fiddle

So basically: How do I eliminate the horizontal space between rotated and non-rotating text using CSS?

Answer 1

, :)
:

@import 'https://fonts.googleapis.com/css?family=Oswald';

h2 {
  text-align: right;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  font-size: 8em;
  line-height: 1.1em;
}

h2 span.smallVertical {
  font-size: 12%;
  letter-spacing: 0.1em;
  
  /*float: left;                 /* NOOOOOOOOOOOO :) */
  display: inline-block;         /* use this instead of float:left */
  transform: rotate(-90deg) translateY(50%); /* Add: translateY 50% */
  width: 8em;                    /* same as font size (OR A BIT SMALLER) */
  text-align:center;             /* to center text inside the red thing */
  vertical-align:top;            /* top to "center" span... (yeah I know...) */
  background:rgba(255,0,0,0.1);  /* just to see what the heck we're doing */
  white-space: nowrap;           /* prevent small text wrap at 8em */
}

h2 span.orangeText {
  color: #FF9900;
}

<h2>
  <span class="smallVertical orangeText">We're Just A</span>
  Small<br/>Company<br/>
  <span class="smallVertical">Striving For A</span>
  <span class="orangeText">Big Feel</span>
</h2>

Hide result

Tip-of-tha-day: white-space: nowrap;, 8em - , : https://jsfiddle.net/jf5kwh3t/8/

" (, jsFiddle), text-align: left;.

Answer 2

, , .

div, .

HTML:

<h2>
<div class="top">
    <span class="smallVertical orangeText">We're Just A</span>
    Small
</div>
<div class="mid">
  Company
</div>
<div class="bottom">
    <span class="smallVertical">Striving For A</span>
    <span class="orangeText">Big Feel</span>
</div>

CSS

@import 'https://fonts.googleapis.com/css?family=Oswald';
h2 {
    position: relative;
    text-align: right;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: 8em;
    line-height: 1.1em;
}

h2 div {
    position: absolute;
    right: 0;
}

.top {
    top: 0;
}

.mid {
    top: 135px;
}

.bottom {
    top: 270px;
}

h2 span.smallVertical {
    font-size: 12%;
    transform: rotate(-90deg);
    letter-spacing: 0.1em;
    position: absolute;
    top: 0;
    left: -66px;
}

.bottom .smallVertical {
    left: -76px
}

h2 span.orangeText {
    color: #FF9900;
}

https://jsfiddle.net/jf5kwh3t/7/