How can I align the text to be vertically centered with the other elements?

Question

I am creating rows of objects that are currently in an HTML table as separate elements so that I have more flexibility when making the page responsive. However, I am unable to get the span text elements to center with the status div or button at all. The span text seems to have a larger bottom 'padding' than the other elements and for the life of me I can't figure out why.

I have to use floats for alignment (to my knowledge), unfortunately, as the website must fully support IE10+, otherwise I would use something like flex. Most of the things I've looked at and researched online deal with one line of text another element and many suggest editing the line height which seems to me like it wouldn't be the best solution for this case.

The codepen for all the code is here: https://codepen.io/stevennava/pen/WNrzzKo and here is the code (per StackOverflow standards):

 #outer-border { border: 1px solid black; border-radius: 5px; padding: 1.3em 0; position: relative; } #centered-container { margin: 0; padding: auto; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #status { position: relative; border: 1px solid lightgrey; border-radius: 8px; padding: 0.2em 0.2em } #status-message { float: left; margin-left: 1.2em; } #status-circle { width: 12px; height: 12px; background-color: orange; border-radius: 50%; float: left; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #button { height: 1.5em; width: 1.5em; text-align: center; }.order-element { padding: 0; float: left; margin-left: 15px; }.clearfix { overflow: auto; }.clearfix::after { content: ""; clear: both; display: table; }

 <div id="outer-border" class="clearfix"> <div id="centered-container" class="clearfix"> <span name="user-name" class="order-element">John Smith</span> <div id="status" class="order-element"> <div id="status-circle" class=""></div> <span id="status-message" class="">Complete<span> </div> <div class="clearfix"> <span name="order-number" class="order-element">123456</span> <span name="order-amount" class="order-element">$35.45</span> <span name="fulfillment-date" class="order-element">07/07/2020 07:00 PM</span> <button id="button" class="order-element">...</button> </div> </div>

and this is this the result looks like:

Answer 1

Two things, the height of the button is causing the .clearfix div's height to stretch, and the border on the #status is causing it's height to stretch.

If you don't want to completely change this up, you can add padding to match the thickness of the border on the spans, and set the button height to auto.

 #outer-border { border: 1px solid black; border-radius: 5px; padding: 1.3em 0; position: relative; } #centered-container { margin: 0; padding: auto; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #status { position: relative; border: 1px solid lightgrey; border-radius: 8px; padding: 0.2em 0.2em } #status-message { float: left; margin-left: 1.2em; } #status-circle { width: 12px; height: 12px; background-color: orange; border-radius: 50%; float: left; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #button { height: auto; width: 1.5em; text-align: center; }.order-element { padding: 0; float: left; margin-left: 15px; }.clearfix { overflow: auto; }.clearfix::after { content: ""; clear: both; display: table; }.pad-1 { padding-top: 1px; padding-bottom: 1px; }

 <div id="outer-border" class="clearfix"> <div id="centered-container" class="clearfix"> <span name="user-name" class="order-element pad-1">John Smith</span> <div id="status" class="order-element"> <div id="status-circle" class=""></div> <span id="status-message" class="">Complete<span> </div> <div class="clearfix"> <span name="order-number" class="order-element pad-1">123456</span> <span name="order-amount" class="order-element pad-1">$35.45</span> <span name="fulfillment-date" class="order-element pad-1">07/07/2020 07:00 PM</span> <button id="button" class="order-element">...</button> </div> </div>