如何在p元素的行尾定位“content”？

<style>
    p {
        float: left;
    }
    .content {
        clear: both;
    }
</style>

<p>This is a paragraph.</p>
<div class="content">content</div>

<style>
    p {
        position: relative;
    }
    .content {
        position: absolute;
        top: 0;
        right: 0;
    }
</style>

<p>This is a paragraph.<span class="content">content</span></p>

<style>
    p {
        display: inline-block;
    }
    .content {
        display: inline;
    }
</style>

<p>This is a paragraph.<span class="content">content</span></p>