How to place two spans side by side and then one span on top of them-CodePudding

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>

CodePudding user response：

#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>

CodePudding user response：

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>

CodePudding user response：

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;
}