Align vertical rotated text with horizontal text

Question

I'm playing with some vertical text as a span within a heading element. The problem is I can't figure out how to eliminate the space that's created between the vertical span and the rest of the text content.

Looking at the fiddle, I'm looking to tuck "We're Just A" right up next to the S in Small and the "Striving For A" right next to the 'B' in Big Feel.

What it looks like now:

What I'm looking to do

The 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>

The 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 to eliminate the horizontal space between rotated and non-rotated text using CSS?

Answer 1

This is quite hard and seems like you need some real help here :)
I'll try to explain in code:

@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>

Tip-of-tha-day: By adding white-space: nowrap; you can even make the text exceed the famous 8em and still make it nicely and typographically aligned at the baseline as in this demo: https://jsfiddle.net/jf5kwh3t/8/

To make all small text aligned "baseline" (like in the jsFiddle's demo last line) simply use
text-align: left;.