I want to know how to place two spans side by side, and then one span on top and to the left. Something like below where each price is a span. I am absolutely terrible at CSS so any help would be appreciated, thanks.
$1.15
$2.00 $3.00
I currently have the following HTML but it has everything side by side.
<span id="top-left" class="is-text-align-right">$1.15</span>
<span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
<span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>
#top-left {display: block}
or
span.is-text-align-right:fisrt-child(display:block)
#top-left {display: block;}<span id="top-left" class="is-text-align-right">$1.15</span>
<span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
<span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>This is a little solution usinf flexbox. I'll use a wrapper for flexbox container, then spans became flex element and can be traited as you want.
.wrapper{
display:flex;
width:200px;/*not necessary*/
flex-wrap:wrap;
}
#top-left{
flex: 0 1 100%;
}
#bottom-left,
#bottom-right{
flex: 0 1 50%;
}<div class="wrapper">
<span id="top-left" class="is-text-align-right">$1.15</span>
<span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
<span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>
</div>add following css to your code
#top-left::after{
content: "\a";
white-space: pre;
}<span id="top-left" class="is-text-align-right">$1.15</span>
<span id="bottom-left" class="is-display-inline-block is-text-align-right">$2.00</span>
<span id="bottom-right" class="is-display-inline-block is-text-align-right">$3.00</span>if you required space between 2 and 3rd span. you can add this CSS also.
#bottom-right {
margin-left: 20px;
}