As evident from the code snippet, there are 2 dynamically generated flex divs (although there could be more).
Is there a method to horizontally align items on larger screens without altering the HTML structure?
I am seeking something similar to:
.detail-card {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid rgb(222, 226, 230);
border-radius: 0.5rem;
}
.custom-checkbox-wrapper {
display: flex;
column-gap: 1rem;
margin-top: 1rem;
align-items: baseline;
justify-content: flex-start;
}
@media screen and (max-width: 576px){
.custom-checkbox-wrapper {
flex-direction: column;
}
}<div class="detail-card">
<h4>title</h4>
<div class="custom-checkbox-wrapper">
<div>
<input type="checkbox">
<label>First</label>
</div>
<p>Price: <span>50 €</span></p>
<p>Name: <span>Name 1</span></p>
</div>
<div class="custom-checkbox-wrapper">
<div>
<input type="checkbox">
<label>Second second</label>
</div>
<p>Price: <span>60 €</span></p>
<p>Name: <span>Some Name 2</span></p>
</div>
</div>