Aligning key colon value data in css without using HTML table? - html

Question

I have the following data that I want to show.
Ideally I want the keys and values left aligned, separated with colons in the middle.
I want the result to be like the following:
key1 : value1
key2 : value2
keyAbc: Value Abc
key_N : value N
And not like the following:
key1: value1
key2: value2
keyAbc: Value Abc
key_N: value N
How to do this in CSS or SCSS, and not using HTML table?

Answer 1

You can use grid, making the columns take on the max width of content.
This snippet adds the colons in a pseudo element as they seem to be just a visual clue rather than part of the data.
Of course you will want probably to add some padding to suit your particular requirements.
.table {
display: grid;
grid-template-columns: max-content max-content;
}
.table > *:nth-child(even)::before {
content: ":";
}
<div class="table">
<div>key1</div>
<div>value1</div>
<div>key2222222</div>
<div>value2</div>
<div>key3</div>
<div>value3</div>
</div>

Answer 2

Just use the inline-block and make sure the children of the main DIV gets that too and it will automatically resize based on widest width, much like table. No need for flex.
.inline-block {
display: inline-block;
}
.inline-block > div {
margin: 2px;
padding: 1px;
}
<div class="inline-block">
<div>key1</div>
<div>keykey2</div>
<div>key3</div>
</div>
<div class="inline-block">
<div>:</div>
<div>:</div>
<div>:</div>
</div>
<div class="inline-block">
<div>value1</div>
<div>value2</div>
<div>Value3</div>
</div>

Answer 3

If you're using div structure, you can use display: flex and could do something like this:
.css-table {
display: flex;
}
.key {
width: 10%;
}
.val::before {
content: ': ';
}
<div class="css-table">
<div class="key">key1</div>
<div class="val">value1</div>
</div>
<div class="css-table">
<div class="key">key2111</div>
<div class="val">value2</div>
</div>
<div class="css-table">
<div class="key">key3</div>
<div class="val">value3</div>
</div>
<div class="css-table">
<div class="key">key4</div>
<div class="val">value4</div>
</div>
If you don't want to specify width, you'll need use JavaScript to calculate the width and apply it inline.
let maxWidth = 0;
// Calculate maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
let currWidth = keyEl.clientWidth;
if (currWidth > maxWidth) {
maxWidth = currWidth;
}
});
});
// Apply maxWidth
document.querySelectorAll('.css-table').forEach(function(cssTableEl) {
cssTableEl.querySelectorAll('.key').forEach(function(keyEl) {
keyEl.style.width = maxWidth + 'px';
});
});
.css-table {
display: flex;
}
.val::before {
content: ': ';
}
<div class="css-table">
<div class="key">key1</div>
<div class="val">value1</div>
</div>
<div class="css-table">
<div class="key">key2111</div>
<div class="val">value2</div>
</div>
<div class="css-table">
<div class="key">key3</div>
<div class="val">value3</div>
</div>
<div class="css-table">
<div class="key">key4</div>
<div class="val">value4</div>
</div>