Here's the HTML and CSS I have -
.font-size-add-class {
background-color: #2f2f2f;
color: #f9f7f1;
}
.font-sizes {
text-align: right;
display: table;
margin-top: 15px;
cursor: pointer;
}
.font-sizes > .small {
font-size: 12px;
}
.font-sizes > .medium {
font-size: 14px;
}
.font-sizes > .large {
font-size: 18px;
}
.font-sizes > div {
display: table-cell;
padding: 0 10px;
font-weight: bold;
border-top: 1px solid #2f2f2f;
border-bottom: 1px solid #2f2f2f;
border-right: 1px solid #2f2f2f;
}
.font-sizes > div:first-child {
border-left: 1px solid #2f2f2f;
}<div class="font-sizes">
<div class="small">a</div><!--
--><div class="medium font-size-add-class">a</div><!--
--><div class="large">a</div>
</div>If I avoid using table on the parent and table-cell on the child, the div blocks will have different sizes due to varying font sizes. Additionally, the fonts won't be horizontally aligned.
I'm looking to replicate the current structure exactly as it looks now but move it to the right side of the page. Any suggestions on how I can achieve this?