How to get the second text right next to the header price?

Question

I'm trying to get something like: $40/hour but making the $40 font bigger than the /hour. I am using

and for some reason, it makes the /hour move to the next line . How can I proceed with this? >-<

<div class="pricechart" style="text-align: center;">
            <div class="pricechart-hourly" style="width:250px; border: 1px solid #ccc; text-transform: uppercase; border-radius: 25px!important; overflow: hidden; margin: 10px 5px 5px 10px; display: inline-block; float: left;">
                <div class="pricechart-header" style="background-color: #f15b5d; padding: 5px 0px 5px 0px; overflow: hidden;">
                    <h5 style=" color: #fff; text-transform: uppercase; font-size: 20px;">Hourly</h5>
                </div>
                <div class="pricechart-price">
                <p style="font-size: 30px; color: #9B9B9B;">$40</p><p style="color: #afafb6;">/hour</p>
                </div>
                <p style="color: #878792; text-transform:none;">Best option short-term uses </p>
            </div>
            <div class="pricechart-daily" style="width:250px; border: 1px solid #ccc; text-transform: uppercase; border-radius: 25px!important; overflow: hidden; margin: 10px 5px 5px 10px; display: inline-block; float: left;">
                <div class="pricechart-header" style="background-color: #44bbb7; padding: 5px 0px 5px 0px; overflow: hidden;">
                    <h5 style=" color: #fff; text-transform: uppercase; font-size: 20px">Daily</h5>
                </div>
                <p style="font-size: 30px; color: #9B9B9B;">$40</p><p style="color: #afafb6;">/daily</p>
                <p style="color: #878792; text-transform:none;">Best option short-term uses </p>
            </div>
            <div class="pricechart-weekly" style="width:250px; border: 1px solid #ccc; text-transform: uppercase; border-radius: 25px!important; overflow: hidden; margin: 10px 5px 5px 10px; display: inline-block; float: left;">
                <div class="pricechart-header" style="background-color: #16A085; padding: 5px 0px 5px 0px; overflow: hidden;">
                    <h5 style=" color: #fff; text-transform: uppercase; font-size: 20px">Weekly</h5>
                </div>
                <p style="font-size: 30px; color: #9B9B9B;">$40</p><p style="color: #afafb6;">/weekly</p>
                <p style="color: #878792; text-transform:none;">Best option short-term uses </p>
            </div>
            <div class="pricechart-monthly" style="width:250px; border: 1px solid #ccc; text-transform: uppercase; border-radius: 25px!important; overflow: hidden; margin: 10px 5px 5px 10px; display: inline-block; float: left;">
                <div class="pricechart-header" style="background-color: #9b8ade; padding: 5px 0px 5px 0px; overflow: hidden;">
                    <h5 style=" color: #fff; text-transform: uppercase; font-size: 20px">Monthly</h5>
                </div>
                <p style="font-size: 30px; color: #9B9B9B;">$40</p><p style="color: #afafb6;">/monthly</p>
                <p style="color: #878792; text-transform:none;">Best option short-term uses </p>
            </div>
        </div>

Yikes, why are you inlining all your styles? consider pulling them out into an external stylesheet. It will be much cleaner and easier to maintain. — dmikester1, Oct 09 '18 at 19:13
And learn why [`!important is a bad idea`](https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css). — David Thomas, Oct 09 '18 at 19:14
Oh, I am using this as a test. i'm going to organize it and put it a separate stylesheet in a bit. — Sarah Cha, Oct 09 '18 at 19:22
@DavidThomas I know, I usually don't like using !important but it's for work and the previous developer did some nasty work and if I change the original css code, it will mess up EVERYTHING. It's terrible practice though, I know. — Sarah Cha, Oct 09 '18 at 19:23

score 1 · Answer 1 · answered Oct 09 '18 at 19:18

You need to use span tag instead of paragraph.

<div class="pricechart" style="text-align: center;">
            <div class="pricechart-hourly" style="width:250px; border: 1px solid #ccc; text-transform: uppercase; border-radius: 25px!important; overflow: hidden; margin: 10px 5px 5px 10px; display: inline-block; float: left;">
                <div class="pricechart-header" style="background-color: #f15b5d; padding: 5px 0px 5px 0px; overflow: hidden;">
                    <h5 style=" color: #fff; text-transform: uppercase; font-size: 20px;">Hourly</h5>
                </div>
                <div class="pricechart-price">
                <p style="font-size: 30px; color: #9B9B9B;">$40<span style="color: #afafb6;font-size: 16px;text-transform:none;">/hour</span></p>
                </div>
                <p style="color: #878792; text-transform:none;">Best option short-term uses </p>
            </div>
            <div class="pricechart-daily" style="width:250px; border: 1px solid #ccc; text-transform: uppercase; border-radius: 25px!important; overflow: hidden; margin: 10px 5px 5px 10px; display: inline-block; float: left;">
                <div class="pricechart-header" style="background-color: #44bbb7; padding: 5px 0px 5px 0px; overflow: hidden;">
                    <h5 style=" color: #fff; text-transform: uppercase; font-size: 20px">Daily</h5>
                </div>
                <p style="font-size: 30px; color: #9B9B9B;">$40<span style="color: #afafb6;font-size: 16px;text-transform:none;">/daily</span></p>
                <p style="color: #878792; text-transform:none;">Best option short-term uses </p>
            </div>
            <div class="pricechart-weekly" style="width:250px; border: 1px solid #ccc; text-transform: uppercase; border-radius: 25px!important; overflow: hidden; margin: 10px 5px 5px 10px; display: inline-block; float: left;">
                <div class="pricechart-header" style="background-color: #16A085; padding: 5px 0px 5px 0px; overflow: hidden;">
                    <h5 style=" color: #fff; text-transform: uppercase; font-size: 20px">Weekly</h5>
                </div>
                <p style="font-size: 30px; color: #9B9B9B;">$40<span style="color: #afafb6;font-size: 16px;text-transform:none;">/weekly</span></p>
                <p style="color: #878792; text-transform:none;">Best option short-term uses </p>
            </div>
            <div class="pricechart-monthly" style="width:250px; border: 1px solid #ccc; text-transform: uppercase; border-radius: 25px!important; overflow: hidden; margin: 10px 5px 5px 10px; display: inline-block; float: left;">
                <div class="pricechart-header" style="background-color: #9b8ade; padding: 5px 0px 5px 0px; overflow: hidden;">
                    <h5 style=" color: #fff; text-transform: uppercase; font-size: 20px">Monthly</h5>
                </div>
                <p style="font-size: 30px; color: #9B9B9B;">$40<span style="color: #afafb6;font-size: 16px;text-transform:none;">/monthly</span></p>
                <p style="color: #878792; text-transform:none;">Best option short-term uses </p>
            </div>
        </div>

To add to this answer, this is some good reading: http://www.htmldog.com/guides/html/intermediate/spandiv/ — , Oct 09 '18 at 19:21
Gah! This is something so simple, yet I didn't even think about it. Sorry! Thank you! — Sarah Cha, Oct 09 '18 at 19:25

How to get the second text right next to the header price?

1 Answers1