How to right align text but still keep it indented to left? - html

Question

I am running with a minor CSS problem. I want to have a dual lined text right aligned but they should be intended in a single line. No matter How long the text in the first line grows, the text "Small" should follow and indent itself to the left with the Long text. Both should be aligned to the right though.
ACTUAL
EXPECTED
My js fiddle here
<div>
<div id="blocker">
ABCD
</div>
<div id="wrapper">
<p id="inner">
<h3>A very very long text</h3>
<h3>Small</h3>
</p>
</div>
</div>
#blocker{
background-color: green;
float: left;
width: 30%;
height: 100px;
}
#wrapper{
text-align: right;
background: grey;
height: 100px;
}
#inner{
text-align: left;
}

Answer 1

just make these changes in your csss and html:
CSS:
#inner{
display: inline-block;
float: right;
text-align: left;
}
HTML:
<div id="inner">
<h3>A very very long text</h3>
<h3>Small</h3>
</div>
Demo: http://jsfiddle.net/ykmupf1r/6/

Answer 2

You need to put a containing div around the text in the right section like below;
<div class="txt">
<p id="inner"> </p>
<h3>A very very long text</h3>
<h3>Small</h3>
<p></p>
</div>
And add styles like below;
.txt {
float: right;
text-align: left;
width: auto;
}

Answer 3

There is no logical reason at all to put an <h3> inside a <p>. That's about as un-semantic as you can get. You should use tags to best suit your content. If you don't have any headers, don't use any header tags. Just don't ever put a header inside a paragraph.
Demo
css
#blocker{
background-color: green;
float: left;
width: 30%;
height: 100px;
}
#wrapper{
background: grey;
height: 100px;
}
#inner{
float: right;
text-align: left;
font-size: 18px;
font-weight: bold;
}
html
<div>
<div id="blocker">
ABCD
</div>
<div id="wrapper">
<p id="inner">
A very very long text
<br/>
Small
</p>
</div>
</div>

Answer 4

try this:
HTML
<div>
<div id="blocker">
ABCD
</div>
<div id="wrapper">
<p id="inner">
<h3>A very very long text</h3>
<h3>Small</h3>
</p>
</div>
</div>
CSS
#blocker{
background-color: green;
float: left;
width: 30%;
height: 100px;
}
#wrapper{
text-align: right;
background: grey;
height: 100px;
}
#wrapper > h3{ text-align:left}
Also you can add a new div for say the margin-left