Align flex item horizontally with other <span> outside container-CodePudding

I am designing a website. Inside an 'email post simulator' where each post is a new email with name and title. I have to align the title so that it matches the beginning of the line of the others.

I have tried encapsulating the name and title within a container to treat them individually. it didn't work

The elements around it do not have any margin that it affects.

Appearance i'm looking for

My web

<div >
        <input type="checkbox" >
        <span ></span>
        <span >Richard Channing</span>
        <span >Memorial Clinic</span>
        <span >12 April 2014</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /></button>
    </div>

    <div >
        <input type="checkbox" >
        <span ></span>
        <span >Elisabeth Bale</span>
        <span >From Connecticut</span>
        <span >21 June 2013</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /</button>
    </div>

    <div >
        <input type="checkbox" >
        <span ></span>
        <span >Sarah Connor</span>
        <span >Cyberdyne Systems</span>
        <span >20 June 2013</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /</button>
    </div>


.alerts-messaging-container-person {
width: 1000px;
margin: auto;
display: flex;
align-content: flex-end;
gap: 30px;
border: 1px solid rgb(204, 203, 203);


.alerts-messaging-container-person span {
    align-self: center;
    font-size: 1.2em;

}

CodePudding user response：

You may use a display: grid; container that will set those column with fixed width so that they'll be consistently aligned along rows.

The grid template used in this demo is: auto auto 35% 35% 10em auto;

.alerts-messaging-container-person {
  width: 100%;
  margin: auto;
  display: grid;
  border: 1px solid rgb(204, 203, 203);
  grid-template-columns: auto auto 35% 35% 10em auto;
}


.alerts-messaging-container-person span {
  align-self: center;
  font-size: 1.2em;
}

img{
  width: 30px;
}

<div >
  <input type="checkbox" >
  <span ></span>
  <span >Elisabeth Bale</span>
  <span >From Connecticut</span>
  <span >21 June 2013</span>
  <button>
    <img
      src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png"/>
  </button>
</div>

<div >
  <input type="checkbox" >
  <span ></span>
  <span >Sarah Connor</span>
  <span >Cyberdyne Systems</span>
  <span >20 June 2013</span>
  <button>
    <img
      src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" />
  </button>
</div>

CodePudding user response：

Put the first three children of <div> in a new <div>.

<div>
    <input type="checkbox" >
    <span ></span>
    <span >Richard Channing</span>
</div>

Now, as all of the children are aligned to the left, but as we want them to have a gap between them without messing up the alignment of every other <div>s, we use flex-basis.

.alerts-messaging-container-person * {
  flex-basis: 25%;
}

The * after mentioning the class selects all the children of the parent with that class.

Here's the link to codepen