Align text on the side and top of other text css - html

Question

How can I achieve this using css?
This is what I've tried:
<label style="position:absolute; top:-15px; margin-left: 20px; font-size:18px"">R$</label>
<label style="margin-left:45px; font-size: 35px;>54.133</label>
<label style="position:absolute; top:-15px;>48</label>

Answer 1

I think you dont even need that, just a little bit beautifuler
Origin
$234 07-04
After add style
<p style="font-size: 30px; font-weight: lighter; color: rgba(57, 152, 27, 0.97);"><sup style="font-size: 15px;">$</sup>234<sup style="font-size: 15px;">07-04</sup></p>
Please use downbelow style, dont mix html and style, that's terrible
.normal{
font-size: 30px;
font-weight: normal;
color: rgba(57, 152, 27, 0.97);
}
.upper{
font-weight: lighter;
font-size: 15px;
}
<p class="normal">
<sup class="upper">$</sup>234<sup class="upper">07-04</sup>
</p>

Answer 2

label{
font-size:20px;
}
label sup{
font-size: 12px;
vertical-align: top
}
<label><sup>R$</sup>54.133<sup>73</sup></label>
Use superscript tag
<label><sup>R$</sup>54.133<sup>73</sup></label>
https://www.w3schools.com/tags/tag_sup.asp

Answer 3

This is the css solution to achieve the superscript.Just try this:
<label style="position:relative; top:-0.5em; margin-left: 20px; font-family: 'Segoe UI Light'; font-size:18px"">R$</label>
<label style="margin-left:45px; font-size: 35px; font-family: 'Segoe UI Light'" runat="server" id="lblBalancePeriod">54.133</label>
<label style="position:relative; top:-0.8em;">48</label>

Answer 4

HTML:
<span class="currency">
<span class="prefix">R$</span>
54.133
<span class="suffix">73</span>
</span>
CSS:
.currency {
color: green;
font-size: 40px;
line-height: 40px;
}
.prefix, .suffix {
font-size: 20px;
vertical-align: text-top;
}
Shown in Plunker.

Answer 5

You can use flexbox:
<div class="container">
<label class="sign">R$</label>
<label class="number">54.133</label>
<label class="decimal";>48</label>
</div>
<style>
.container{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
label.sign{
align-self: flex-start;
font-size: 20px;
}
label.number{
font-size: 30px;
}
label.decimal{
align-self: flex-start;
font-size: 20px;
}
</style>
More Here