subscript and superscript for the same element

Well, you can specify position of sup relative to Sample Text's right border.

http://jsfiddle.net/a754h/

This one is similar to CyberDudes approach, additionally it indents the following text depending on the width of sub and sup:

http://jsfiddle.net/jwFec/1/

Some text <span class="supsub"><sup>sup</sup><sub>sub</sub></span> followed by other text.<br />

<style>
.supsub {
    display: inline-block;
}

.supsub sup,
.supsub sub {
    position: relative;
    display: block;
    font-size: .5em;
    line-height: 1.2;
}

.supsub sub {
    top: .3em;
}
</style>

I'm no CSS guru but you could try something along the lines of http://jsfiddle.net/TKxv8/1/

There are a lot of hardcoded values and the effects on other elements around may only be found afterwards but it's a good place to start.

Sample Text 
<span class='supsub'>
    <sup class='superscript'>Sup</sup>
    <sub class='subscript'>Sub</sub>
</span>

.supsub {position: absolute}
.subscript {color: green; display:block; position:relative; left:2px; top: -5px}
.superscript {color: red; display:block; position:relative; left:2px; top: -5px}

I use the following:

.supsub {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    vertical-align: middle;
}

<span class="supsub">
    <span>sup</span>
    <span>sub</span>
</span>