Align items horizontally, without changing html structure-CodePudding

Like you can see from the snippet there is 2 dynamically created flex divs (it can be more) Is there a way to align items horizontally on bigger screens without changing html structure?

I'm loking for:

.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 >
  <h4>title</h4>
  <div >
    <div>
      <input type="checkbox">
      <label>First</label>
    </div>
    <p>Price: <span>50 €</span></p>
    <p>Name: <span>Name 1</span></p>
  </div>
  <div >
    <div>
      <input type="checkbox" disabled="disabled">
      <label  title="Second">Second second</label>
    </div>
    <p >Price: <span>60 €</span></p>
    <p >Name: <span>Some Name 2</span></p>
  </div>
</div>

CodePudding user response：

You can try to set a flexbox for detail-card

.detail-card {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgb(222, 226, 230);
  border-radius: 0.5rem;
  /*Create flexbox*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1rem; /*Add gaps for columns*/
}

and title with flex-basis 100%

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

Full changes

.detail-card {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid rgb(222, 226, 230);
  border-radius: 0.5rem;
  /*Create flexbox*/
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1rem; /*Add gaps for columns*/
}
.detail-card h4 {
  flex-basis: 100%;
}
.custom-checkbox-wrapper {
  display: flex;
  column-gap: 1rem;
  margin-top: 1rem;
  align-items: baseline;
  justify-content: flex-start;
}

<div >
  <h4>title</h4>
  <div >
    <div>
      <input type="checkbox">
      <label>First</label>
    </div>
    <p>Price: <span>50 €</span></p>
    <p>Name: <span>Name 1</span></p>
  </div>
  <div >
    <div>
      <input type="checkbox" disabled="disabled">
      <label  title="Second">Second second</label>
    </div>
    <p >Price: <span>60 €</span></p>
    <p >Name: <span>Some Name 2</span></p>
  </div>
</div>

CodePudding user response：

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 >
  <h4>title</h4>
  <div >
    <div>
      <input type="checkbox">
      <label>First</label>
    </div>
    <p>Price: <span>50 €</span></p>
    <p>Name: <span>Name 1</span></p>
  </div>
  <div >
    <div>
      <input type="checkbox" disabled="disabled">
      <label  title="Second">Second second</label>
    </div>
    <p >Price: <span>60 €</span></p>
    <p >Name: <span>Some Name 2</span></p>
  </div>
</div>