How to have consistent margin/padding against a span?

Question

I have some text in p tags and I wish to have them consistently aligned again their respective span texts.

This is what I currently have:

But I want the text on the right side to be consistently aligned with the left side. This is what I want:

This is my code:

<div className="basic-flex-large-gap">
  <span className="gray-dynamic">
    TRANSITION_ACCELERATE
  </span>
  <p className="span-text">
    cubic-bezier (0.4, 0, 1, 1)
  </p>
</div>

<div className="basic-flex-large-gap">
  <span className="gray-dynamic">
    TRANSITION_DECELERATE
  </span>
  <p className="span-text">
    cubic-bezier (0, 0, 0.2, 1)
  </p>
</div>

<div className="basic-flex-large-gap">
  <span className="gray-dynamic">
    TRANSITION_STANDARD
  </span>
  <p className="span-text">
    cubic-bezier (0.4, 0, 0.2, 1)
  </p>
</div>

<div className="basic-flex-large-gap">
  <span class="gray-dynamic">
    TRANSITION_SHARP
  </span>
  <p className="span-text">
    cubic-bezier (0.4, 0, 0.6, 1)
  </p>
</div>

And this is my styling:

.basic-flex-large-gap {
  display: flex;
  align-items: center;
}
.gray-dynamic {
  display: inline-block;
  background-color: #F6F8FA;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-weight: normal;
  font-size: 16px;
  font-family: 'NMyFont', Sans-serif;
  line-height: 19px;
  color: #212121;
}
.span-text {
  font-weight: normal;
  font-family: 'MyFont', Sans-serif;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

I'm not sure how to go about this. Any and all help will be appreciated, thank you!

Answer 1

CSS-Tables (or an actual table ) is your best option

 .basic-flex-large-gap { display: table-row; } .gray-dynamic { display: table-cell; background-color: lightgrey; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 4px; margin-top: 5px; margin-bottom: 5px; font-weight: normal; font-size: 16px; font-family: 'NMyFont', Sans-serif; line-height: 19px; color: #212121; } .span-text { display: table-cell; font-weight: normal; font-family: 'MyFont', Sans-serif; font-size: 14px; line-height: 18px; text-align: left; padding-left: 5px; padding-right: 15px; }

 <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_ACCELERATE </span> <p class="span-text"> cubic-bezier (0.4, 0, 1, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_DECELERATE </span> <p class="span-text"> cubic-bezier (0, 0, 0.2, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_STANDARD </span> <p class="span-text"> cubic-bezier (0.4, 0, 0.2, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_SHARP </span> <p class="span-text"> cubic-bezier (0.4, 0, 0.6, 1) </p> </div>

Answer 2

You can try with css grid

 .basic-flex-large-gap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .gray-dynamic { display: inline-block; background-color: #F6F8FA; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 4px; margin-top: 5px; margin-bottom: 5px; font-weight: normal; font-size: 16px; font-family: 'NMyFont', Sans-serif; line-height: 19px; color: #212121; } .span-text { font-weight: normal; font-family: 'MyFont', Sans-serif; font-size: 14px; line-height: 18px; text-align: left; }

 <div class="basic-flex-large-gap"> <span className="gray-dynamic"> TRANSITION_ACCELERATE </span> <p class="span-text"> cubic-bezier (0.4, 0, 1, 1) </p> </div> <div class="basic-flex-large-gap"> <span className="gray-dynamic"> TRANSITION_DECELERATE </span> <p className="span-text"> cubic-bezier (0, 0, 0.2, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_STANDARD </span> <p className="span-text"> cubic-bezier (0.4, 0, 0.2, 1) </p> </div> <div class="basic-flex-large-gap"> <span class="gray-dynamic"> TRANSITION_SHARP </span> <p class="span-text"> cubic-bezier (0.4, 0, 0.6, 1) </p> </div>