Horizontal and vertical align text in different directions

Question

I am developing a website and "example.com" is the test heading of it, I wanted to know how can I make ".com" written sideways bottom-up (obviously by having a lesser font size than "example").

Answer 1

There might be a simpler way, also your question is somewhat vague on the last direction part. So this is a quick answer were I put some borders on to show where stuff is.

.example-thing {
  border: solid lime 1px;
}

.firstpart {
  margin-top: 1em;
  font-size:2em;
  vertical-align: bottom;
  border: solid blue 1px;
  display: inline-block;
}
  .com {
    margin-bottom: .5em;
    margin-left: -.5em;
    border: solid orange 1px;
    vertical-align: bottom;
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
  }

<div class="example-thing">
  <span class="firstpart">example</span>
  <span class="com">.com</span>
</div>