Style elements from the same div to be on different lines in Sass-CodePudding

I have a div with a h3, p and button elements. I want the h3 to be on a separate line, and the p and button element on a different line. How can I implement this?

Like:

****{names}

{date} Trashicon****

  <div className="nameHeader">
      <h3>{names}</h3>
      <p>{date}</p>

      <button
        className="nameHeader__icon"
        onClick={deletetNames}
      >
        <GrTrash />
      </button>
    </div>

.nameHeader {
  width: 100%;
  height: 100%;
  padding: 1rem;

  h3 {
    font-weight: 600;
  }
  p {
    font-size: 20px;
  }

  &__icon {

    color: #ccc;
  }
}

CodePudding user response：

You probably want something like this:

<div className="nameHeader">
  <h3>{names}</h3>

  <div className="whatever">
    <p>{date}</p>
    <button
      className="nameHeader__icon"
      onClick={deletetNames}
    >
  </div>
    <GrTrash />
  </button>
</div>

And for the CSS/SASS part:

.nameHeader {
  width: 100%;
  height: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  h3 {
    font-weight: 600;
  }
  .whatever {
    display: flex;
    align-items: center;
    flex-direction: row; // default
    justify-content: space-arround;
  }
  p {
    font-size: 20px;
  }

  &__icon {
    color: #ccc;
  }
}

Just play around with align-items and justify-content to get the result you want.

CodePudding user response：

Use inline-block

p {
  display: inline-block;
}