show divs one after the other-CodePudding

I have a popup where I show notifications. The user can delete notifications at any time. The day the notification arrives and the delete button will appear one after the other. No matter what I did, I couldn't.

How can I show these two divs under each other, as can be seen in the marked area in the picture?

<div className="notificationlist__container only-desktop">
  {props.notification.notificationList.map((e) => {
    return (
      <div className="notificationlist__item">
        <div className="notificationlist__info">
          <div className="notificationlist__content">
            Lorem, ipsum.
          </div>
          <div className="notificationlist__detail">
            <Link to="/profil">
              <div>Profile</div>
              <AS.KeyboardArrowRightIcon />
            </Link>
          </div>
        </div>
        <div className="notificationlist__time">Today
          <div className="delete__button">
            <AS.IconButton >
              <AS.DeleteIcon />
            </AS.IconButton>
          </div>
        </div>

      </div>
    );
  })}
</div>

.notificationlist__container.only-desktop {
  font-size: 1.2rem;
  // padding-right: 2em;
  max-height: 400px;
  overflow: auto;

  .notificationlist__item {
    padding: 0.5em 0;
    border-bottom: 1px solid #d1d1d1;

    &:last-of-type {
      border-bottom: none;
    }

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .notificationlist__info {
      margin-right: 1em;
      max-width: 400px;

      .notificationlist__content {
        color: gray;
      }

      .notificationlist__detail {
        margin-top: 1em;
        color: var(--palette-blue-300);
        display: flex;
        align-items: center;
        font-size: 1.1rem;
        font-weight: 600;

        svg {
          font-size: 1.5rem !important;
        }

        a {
          display: contents;
        }
      }
    }

    .notificationlist__time{
      display: flex;
      .delete__button {
        float: left;
      }
    }
  }
}

CodePudding user response：

display: flex is putting divs next to each other. You can delete display: flex or just add flex-direction: column; to put them under each other. To center them horizontally add align-items: center;

CodePudding user response：

You should move delete button out of notificationlist_time content, then it would be easy to manipulate it

<div className="notificationlist__right">
    <div className="notificationlist__time">today</div>
    <div className="delete__button">
        <AS.IconButton >
          <AS.DeleteIcon />
        </AS.IconButton>
      </div>
</div>

So since it would be two different blocks, you would have an ability to position them like you want.