How to align colored text on the same line

May 4, 2022

So as you can see in the picture below, I want to put the colored text on the same line as the other test (beside Balance).

I tried many things but nothing worked, here is my html file

.card-header p {
  color: #668eee;
}

.card {
  max-width: 600px;
  margin: auto;
}

.GreenTextColor {
  color: #33FF3C;
}

.RedTextColor {
  color: red;
}

<div class="container">
  <div class="card">
    <div class="card-header">
      <br> Account: <a href="{% url 'metrix' things.id %}">{{ things.accountid }}</a>
    </div>
    <div class="card-body">
      Balance: &nbsp;&nbsp;&nbsp;&nbsp;End: {{things.enddate}}&nbsp;&nbsp;&nbsp;&nbsp;Result: Not passed {% if things.balance >= 50000 %}
      <div class="GreenTextColor">
        {{things.balance}}
      </div>
      {% else %}
      <div class="RedTextColor">
        {{things.balance}}
      </div>
    </div>
  </div>

>Solution :

Add display: flex; to .card-body.

.card-header p {
  color: #668eee;
}

.card {
  max-width: 600px;
  margin: auto;
}

.GreenTextColor {
  color: #33FF3C;
}

.RedTextColor {
  color: red;
}

.card-body {
  display: flex;
}

<div class="container">
  <div class="card">
    <div class="card-header">
      <br> Account: <a href="{% url 'metrix' things.id %}">{{ things.accountid }}</a>
    </div>
    <div class="card-body">
      Balance: &nbsp;
      <div class="GreenTextColor">
        {{things.balance}}
      </div>
      <div class="RedTextColor">
        {{things.balance}}
      </div>
    </div>
  </div>