My current challenge involves a small table structured as a bullet list with two columns. To enhance mobile display, I am seeking a way to collapse it down to a single column:
https://i.sstatic.net/LqbA6.png
The current implementation includes the following code snippet:
<style>
@media (min-width: 600px)
{
ul > li > span
{
display: inline-block;
width: 250px;
}
}
@media (max-width: 599px)
{
ul > li > span:first-child
{
display: block;
}
}
</style>
<ul>
<li><span>E-mail:</span> <span><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1808382a199989bcf9284">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f8999a9bb8808182d68b9d">[email protected]</a></a></span>
<li><span>Telefon:</span> <span><a href="tel:+46701234567">070-123 45 67</a></span>
<li><span>Adress:</span> <span>Föreningen XYZ</span><br>
<span></span> <span>Storgatan 1</span><br>
<span></span> <span>123 45 Småstad</span>
<li><span>Swish:</span> <span><a href="tel://1234567890">123-456 78 90</a></span>
<li><span>Bankgiro:</span> <span><a href="tel://1234–5678">1234-5678</a></span>
</ul>
However, I am not satisfied with the fixed column widths and would prefer them to adjust based on content. Additionally, another table I have utilizes text-align: right for the second column but needs left alignment when collapsed. My current solution lacks elegance, and I aim to avoid media queries if possible.
I have explored using Flexbox as an alternative but have experienced challenges achieving my desired layout.