CODEWITHSUNDEEP
htmlcss
Sharads kumar
Sharads kumar

Reputation: 47

Align large text and small text horizontally

I am trying to align small text to the bottom of large text.My code is given below.

I am getting:

enter image description here

I want to achieve this image output:

https://i.sstatic.net/3vF8p.png

<div style="width: 60%;float: left;height: 100%;    display: flex;justify-content: flex-start;flex-direction: column;text-align: left;margin-top: 25px;">
  <span class="Tacivity_head">Total Activity</span>
  <div style="display: flex;">
    <span class="Tacivity_head">12100</span>
    <span >10% Last Week</span>
  </div>
</div>

Upvotes: 1

Views: 703

Answers (4)

Is-haq Adnan
Is-haq Adnan

Reputation: 289

Good day sir, I'll first personally advice you to separate the css from the html either by using the <style> at the head tag or an external file using the <link> then secondly with regards to the subscript, why don't you use the <sub> tag for the spanned "10Last week" try this new one lets see... have a nice day sir

Upvotes: 0

huan feng
huan feng

Reputation: 8623

Align items to baseline will be ok?

.container {
  width: 60%;
  float: left;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  text-align: left;
  margin-top: 25px;
}

.ft__xs {
  font-size: x-small;
}
<div class="container">
  <span class="Tacivity_head">Total Activity</span>
  <div style="display: flex; align-items: baseline">
    <span class="Tacivity_head">12,100</span>
    <span class="ft__xs">10% Last Week</span>
  </div>
</div>

Upvotes: 0

41 72 6c
41 72 6c

Reputation: 1780

There are 2 ways to make you text appear smaller:

With font-size: 10px; // enter your px there
Or with font-size: x-small;

Margin will be necessary in this approach because the small font is moved upwards.
You can then define your margin in your CSS:

HTML:

<span class="Test">10% Last Week</span>

CSS:

.Test{
    // flexible values, adapt these for your case
    font-size: 10px;
    margin-top: 5px;
}

Upvotes: 0

yathavan
yathavan

Reputation: 2376

try flex align-items: flex-end;, check this for more about flex

.Tacivity_head{
font-size:35px;
font-weight: bold;
}

.nunber-container{
display:flex;
align-items: flex-end;
}
<div style="width: 60%;float: left;height: 100%;    display: flex;justify-content: flex-start;flex-direction: column;text-align: left;margin-top: 25px;">
    <span class="Tacivity_head">Total Activity</span>
    <div style="nunber-container">
        <span class="Tacivity_head">12100</span>
        <span >10% Last Week</span>
    </div>  
</div>

Upvotes: 1

Related Questions