how do i stick a html tag on the right side?

Question

My goal is simple, stick the p tag to the right side of the custom css card, to make it stick to the left it is pretty straightforward.

custom-text {
  margin-left: 30px;
}

To better illustrate this

The question is how do I make the $100 dollars always stick to the right? and let say the value of the dollars change to $5, how to make it always on the right?

I can just use

custom-text-right {
    margin-left: 450px;
}

but this solution doesn't scale to different value (Im using bootstrap just for your information)

HTML part:

<h4>Price: <span class="dollar">$3.15</span></h4>

why is this question marked as duplicate? he/she doesn't ask about flexbox. — Getter Jetter, May 02 '17 at 10:59
@OlivierKrull — They ask about aligning left and right. The duplicate question has just already realized that flexbox is the tool to use. — Quentin, May 02 '17 at 11:00

dippas · Accepted Answer · 2017-05-02T11:31:48.410

5

you can do that using flexbox, with justify-content: space-between;

.card {
  display: flex;
  height: 500px;
  width: 500px;
  background: #000;
  justify-content: space-between;
  color: white;
  padding: 30px;
  box-sizing: border-box
}

<div class="card">
  <span>Price:</span>
  <span> $100</span>
</div>

edited May 02 '17 at 11:31

answered May 02 '17 at 10:57

dippas

58,591
15
114
126

Your solution is not flexible, what if there are multiple price and dollar value? I tried it and it doesn't work on multiple span – sinusGob May 02 '17 at 11:11
It will just position it on the same row. – sinusGob May 02 '17 at 11:11
@sinusGob see updated answer – dippas May 02 '17 at 11:16
Alright thanks, but it still doesn't work. Take a look at the jsfiddle. The reason Why I wrote the code differently, because there is an input group https://jsfiddle.net/abqesbzf/2/ – sinusGob May 02 '17 at 11:29
1

here is your [fiddle](https://jsfiddle.net/L6ycd1g0/) – dippas May 02 '17 at 11:31
1

Amazing! thanks alot for taking your time to help. God bless you! – sinusGob May 02 '17 at 11:39

score -1 · Answer 2 · answered May 02 '17 at 10:56

-1

You can use float: right or text-align:right

answered May 02 '17 at 10:56

Geethu Nimesh

60
7

All else being equal, `float: right` would cause the price to drop down to the next line and `text-align: right` would either have no effect or align both bits of content to the right. It's possible to use both of these to get the desired effect, but not without additional work, so the answer isn't complete. – Quentin May 02 '17 at 10:58

how do i stick a html tag on the right side?

2 Answers2