Align flex item horizontally with other <span> outside container

user_19133691 0
Viewed 52

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 class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Richard Channing</span>
        <span class="email-name">Memorial Clinic</span>
        <span class="date">12 April 2014</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /></button>
    </div>

    <div class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Elisabeth Bale</span>
        <span class="email-name">From Connecticut</span>
        <span class="date">21 June 2013</span>
        <button><img src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" /</button>
    </div>

    <div class="alerts-messaging-container-person">
        <input type="checkbox" class="check-all">
        <span class="not-selected"></span>
        <span class="contact-name">Sarah Connor</span>
        <span class="email-name">Cyberdyne Systems</span>
        <span class="date">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;

}
css html
2 Answers

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

<div>
    <input type="checkbox" class="check-all">
    <span class="not-selected"></span>
    <span class="contact-name">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

user_172354310

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 class="alerts-messaging-container-person">
  <input type="checkbox" class="check-all">
  <span class="not-selected"></span>
  <span class="contact-name">Elisabeth Bale</span>
  <span class="email-name">From Connecticut</span>
  <span class="date">21 June 2013</span>
  <button>
    <img
      src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png"/>
  </button>
</div>

<div class="alerts-messaging-container-person">
  <input type="checkbox" class="check-all">
  <span class="not-selected"></span>
  <span class="contact-name">Sarah Connor</span>
  <span class="email-name">Cyberdyne Systems</span>
  <span class="date">20 June 2013</span>
  <button>
    <img
      src="/images/expand_more_FILL0_wght400_GRAD0_opsz48.png" />
  </button>
</div>

user_12212080
Related