'Align items horizontally in sinblings, without changing html structure

Like you can see from the snippet, there are 2 dynamically created flex div's (it can be more)

Is there a way to align items horizontally, on bigger screens, without changing html structure?

I'm loking for:

enter image description here

.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>
htmlcss


Solution 1:[1]

You can use table-row and table-cell to align rows like table's elements

.detail-card {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgb(222, 226, 230);
  border-radius: 0.5rem;
}

.detail-card h4 {
  flex-basis: 100%;
}

.custom-checkbox-wrapper {
  display: table-row;
  column-gap: 1rem;
  margin-top: 1rem;
  align-items: baseline;
}

.custom-checkbox-wrapper p,
.custom-checkbox-wrapper div {
  display: table-cell;
  padding: 1rem;
}

@media screen and (max-width: 576px) {
  .custom-checkbox-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  .custom-checkbox-wrapper p,
  .custom-checkbox-wrapper div {
    padding: 0;
  }
}
<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" disabled="disabled">
      <label class="disabled" title="Second">Second second</label>
    </div>
    <p class="disabled">Price: <span>60 €</span></p>
    <p class="disabled">Name: <span>Some Name 2</span></p>
  </div>
</div>

Solution 2:[2]

Ok, I didn't manage to solve it with flex so did it with grid, and flex on smaller screen (I hope it will be good enough)

.detail-card {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgb(222, 226, 230);
  border-radius: 0.5rem;
}
.custom-checkbox-wrapper {
  column-gap: 1rem;
  margin-top: 1rem;
  align-items: baseline;
  justify-content: flex-start;
  display: grid;
  grid-template-columns: .5fr auto 1fr;
}
@media screen and (max-width: 576px){
  .custom-checkbox-wrapper {
    display: flex;
    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" disabled="disabled">
      <label class="disabled" title="Second">Second second</label>
    </div>
    <p class="disabled">Price: <span>60 €</span></p>
    <p class="disabled">Name: <span>Some Name 2</span></p>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Nikola Pavicevic

Related Questions