Align multiple numbers within row - html

Question

I am using bootstrap to try to create the following layout:
Find below my minimum example:
.curr {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
}
.price {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
color: #131722;
white-space: nowrap;
display: inline-block;
font-size: 36px;
line-height: 1;
height: 34px;
font-weight: 700;
}
.diff {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
white-space: nowrap;
font-size: 18px;
color: #26a69a;
display: inline-block;
}
.markettime {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 1;
letter-spacing: .4px;
text-transform: uppercase;
white-space: nowrap;
color: #37bc9b;
}
.markettime2 {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 1;
letter-spacing: .4px;
text-transform: uppercase;
color: #787b86;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>
<div class="row my-2">
<div class="col-lg-8">
<div class="card card-primary">
<div class="card-body p-2">
<div class="row">
<div>
<div>
<div class="row">
<div>
<div class="price">304.2<span class="">0</span></div>
</div>
<div>
<span class="curr"> USD</span>
</div>
<div>
<span class="diff">+3.57</span>
<span class="diff">(+1.19%)</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div>
<span class="markettime">Market Open</span>
<span class="markettime2">(May 07 13:19 UTC-4)</span>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see the text looks quite similar, but does not align correctly.
Any suggestions why?

Answer 1

You have each of the parts stored in divs, which default to display: block. Block-items take up their entire row. One option would be to set those displays to inline:
.curr {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
}
.price {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
color: #131722;
white-space: nowrap;
display: inline-block;
font-size: 36px;
line-height: 1;
height: 34px;
font-weight: 700;
}
.diff {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
white-space: nowrap;
font-size: 18px;
color: #26a69a;
display: inline-block;
}
.markettime {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 1;
letter-spacing: .4px;
text-transform: uppercase;
white-space: nowrap;
color: #37bc9b;
}
.markettime2 {
-webkit-tap-highlight-color: transparent;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 1;
letter-spacing: .4px;
text-transform: uppercase;
color: #787b86;
white-space: nowrap;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.js"></script>
<div class="row my-2">
<div class="col-lg-8">
<div class="card card-primary">
<div class="card-body p-2">
<div class="row">
<div>
<div>
<div class="row">
<div style="display: inline;">
<div class="price">304.2<span class="">0</span></div>
</div>
<div style="display: inline;">
<span class="curr"> USD</span>
</div>
<div style="display: inline;">
<span class="diff">+3.57</span>
<span class="diff">(+1.19%)</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div>
<span class="markettime">Market Open</span>
<span class="markettime2">(May 07 13:19 UTC-4)</span>
</div>
</div>
</div>
</div>
</div>
</div>
I do not recommend that you use inline styling like I've used, I just did a quick edit to show the difference when changing the display type.

Answer 2

All those empty <div>s create new block elements that create a new line and fill up all the horizontal space available.
I have cleaned up both the HTML and CSS code in here, but with only the HTML changes it will already work as expected:
body {
/* Moved all these common props up here: */
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
font-family: Trebuchet MS, roboto, ubuntu, sans-serif;
text-transform: uppercase;
white-space: nowrap;
line-height: 1
}
.price {
font-size: 36px;
font-weight: 700;
color: #131722;
}
.curr {
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
}
.diff {
font-size: 18px;
color: #26a69a;
}
.marketTime__base {
font-size: 11px;
letter-spacing: .4px;
margin-top: 8px;
}
.marketTime__state {
color: #37bc9b;
}
.marketTime__datetime {
color: #787b86;
}
<div class="row">
<span class="price">304.2<span class="">0</span></span>
<span class="curr"> USD</span>
<span class="diff">+3.57</span>
<span class="diff">(+1.19%)</span>
</div>
<div class="marketTime__base">
<span class="marketTime__state">Market Open</span>
<span class="marketTime__datetime">(May 07 13:19 UTC-4)</span>
</div>
Alternatively, you could use display: inline or display: inline-block to style those <div>s differently, but I think that HTML code could be simplified a lot.