How can I place the two cards side by side, where they are of equal width and adjust accordingly with the width of the screen?
I tried wrapping the cards in a separate div and adding display: flex; property; however, it makes the cards small and doesn’t make them fit the width of the screen.
I have the following code:
// Select all elements with class 'tilelabel' within the 'box' containers
const tileLabels = document.querySelectorAll('.box .tilelabel');
tileLabels.forEach((label) => {
label.addEventListener('click', function() {
const parent = this.closest('.box'); // Find the closest parent with class 'box'
parent.classList.toggle('expanded');
const plus = parent.querySelector('.plus');
plus.style.transform = parent.classList.contains('expanded') ? 'rotate(45deg)' : 'rotate(0)';
});
});
const toggleChild = (e) => {
if (e.currentTarget == e.target) {
const el = e.target;
el.classList.toggle('active');
}
};
const level2 = document.querySelectorAll('.hidden-text ul li:has(ul)');
level2.forEach((li) => li.addEventListener('click', toggleChild));.tilecontainer {
padding: 5px;
font-size: 35px;
}
.box {
background-color: #0051a5;
padding-right: 1em;
padding-top: 1em;
border-radius: 1em;
display: grid;
grid-template-rows: 1fr auto;
grid-template-columns: auto 1em;
grid-template-areas: "sample plus" "extratext extratext";
}
.plus {
grid-area: plus;
background: linear-gradient(#0051a5 0 0), linear-gradient(#0051a5 0 0), #fff;
background-position: center;
background-size: 60% 2.5px, 2.5px 60%;
background-repeat: no-repeat;
transition: transform 0.3s ease;
}
.sign {
border-radius: 50%;
width: 1em;
height: 1em;
margin-right: 1em;
}
.tilelabel {
grid-area: sample;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 1em;
text-transform: uppercase;
cursor: pointer;
font-weight: 600;
color: #fff;
padding-left: 1em;
height: 2em;
}
.tileaccent {
color: #FFC72C;
}
.hidden-text {
grid-area: extratext;
display: none;
font-family: 'PT Sans Narrow', sans-serif;
font-size: 0.75em;
background-color: #fff;
color: #000;
margin: 1em;
padding-top: 0.5em;
padding-left: 1em;
}
.expanded>.hidden-text {
display: block;
animation: fade-in 1s;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hidden-text ul li ul {
display: none;
}
.hidden-text ul li.active ul {
display: block;
}
li .plus {
transform: rotate(0);
}
li.active .plus {
transform: rotate(45deg);
}
/*changes the cursor to a pointer for the list items that have a child ul*/
.hidden-text ul li:has(ul) .plus {
float: right
}
.hidden-text ul li:has(ul) {
cursor: pointer;
}<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">
<div class="tilecontainer">
<div class="box">
<div class="plus sign"></div>
<div class="tilelabel">
Sample <span class="tileaccent">Text</span>
</div>
<div class="hidden-text">
<ul>
<li>Sample Text</li>
<li>Dropdown Text
<div class="plus sign"></div>
<ul>
<li>More Text</li>
</ul>
</li>
<li>Sample Text</li>
</ul>
</div>
</div>
</div>
<div class="tilecontainer">
<div class="box">
<div class="plus sign"></div>
<div class="tilelabel">
Sample <span class="tileaccent">Text</span>
</div>
<div class="hidden-text">
<ul>
<li>Sample Text</li>
<li>Dropdown Text
<div class="plus sign"></div>
<ul>
<li>More Text</li>
</ul>
</li>
<li>Sample Text</li>
</ul>
</div>
</div>
</div>
2
Answers
You were close, wrap with flex but also add width: 100% for the children. Also added media query, so font doesn’t overflow on small screens.
The flex: 1 1 auto property on the .card elements tells the browser to give each card equal width, and to grow or shrink the cards as needed to fit the container.