0

helo guys hope you're doing good. so i have problem with css i don't really understand it but i'm pushing muself beyond my limits to make it work.

so i have these 4 cards:

so if you can see the subvalue and date are not vertically aligned properly( for example in the first card the M and 2 are not under each others) what i want is to vertically align them on the right side

code.js:

<div className={styles.card}>
            <div className={styles.title}>
            {title}
            </div>
            <div className={styles.valueAndUnit}>
            <div className={styles.value}>
            {value}
            </div>
            <div className={styles.unit}>
            {unit}
            </div>
            </div>
            <div className={styles.subValue}>
            {subValue}
            </div>
            <div className={styles.date}>
            {date}
            </div>
        </div>

css code:

.subValue {
    text-align: right;
    margin-right: 10px;
    min-height:25px;

}


.date {
    min-height:25px;
    color:lightslategrey;
    text-align: right;    

}

hope you guys can help

M.I
  • 379
  • 3
  • 18
  • please describe more .. what you mean by M and 2 not aligned ? – Arpit Vyas Jun 10 '20 at 11:11
  • @VyasArpit each card has 5 elements: title,value,unit,subValue and date.and if you can see the subvalue and date are not aligned under each other properly( meaning if u can see the first card the first div, BPM and 04:12 should be aligned under each others in a way the M and 2 are under each others) – M.I Jun 10 '20 at 11:12
  • okay got it :) . – Arpit Vyas Jun 10 '20 at 11:15
  • `M and 2 are under each others`. This doesnt tell anything. Please be more clear about your issue next time. It is not difficult to say "I would like to to have 2 elements aligned to right edge of card". – Józef Podlecki Jun 10 '20 at 11:26

1 Answers1

1

just do in your class like this .

.subValue {
    text-align: right;
    min-height:25px;
}
Arpit Vyas
  • 2,118
  • 1
  • 7
  • 18