Float Right Padding

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<!-- Problem with this row -->
<div class="row">
    <div class="col-md-12">
        <span class="pull-left">
            <span class="ellipsis-text">
                ellipsis text that should cut off
            </span>
        </span>
        <span class="pull-left">
            second text
        </span>
    </div>
</div>

<!-- Row works fine when pixels are used -->
<div class="row">
    <div class="col-md-12">
        <span class="pull-left">
            <span class="ellipsis-text ellipsis-text-px">
                ellipsis text that should cut off
            </span>
        </span>
        <span class="pull-left">
            second text
        </span>
    </div>
</div>

<!-- Row works fine again when not floated -->
<div class="row">
    <div class="col-md-4">
        <span class="ellipsis-text ellipsis-text-small">
            ellipsis text that should cut off
        </span>
        <span>
            second text
        </span>
    </div>
</div>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

.ellipsis-text {
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: auto;
    vertical-align: middle;
}

.ellipsis-text-px {
    max-width: 40px;    
}

.ellipsis-text-small {
    max-width: 80%;
}