Adjusting flex items in a container

August 17, 2022

I have some elements in a container that I am trying to organize in a specific way. Here is an outline:

[1]https://i.stack.imgur.com/Edtui.png

The main thing I’m trying to figure out is how to get the div underneath the two at the top while still being on the same line as the image to the left. I think I could do it if I just nested all the elements on the right in their own div but I was wondering if there was another way. Here’s my css. The .tweet is the parent, the rest are all its children

.tweet {
  width: calc(100% - 2em);
  margin: 1em;
  display: flex;
  border: 2px solid red;
  border-radius: 25px;
  flex: 1;
  flex-wrap: wrap;
}


.profile-photo {
  order:1;
  margin: 8px;
  border-radius: 50px;
}
.username {
  height: 50px;
  order: 2;
  padding: 2px 2px 2px 2px;
  margin-left: 10px;
  align-self: center;
}
.timestamp {
  order: 3;
  height: 50px;
}
.message {
  order: 4;
  padding: 2px 2px 2px 2px;
}
.icon-container {
  order: 5;
  padding: 2px 2px 2px 2px;
}

>Solution :

You can achieve this by using nested flexboxes:

.row {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
}

.space-between {
  justify-content: space-between;
}

.column {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}

.tweet-container {
  border: 1px solid gray;
  border-radius: 15px;
  padding: 25px;
}

.margin-left {
  margin-left: 25px;
}

.tweet-image {
  width: 200px;
  height: 200px;
  background-color: black;
}

h4 {
 margin-top: 100px;
}

<div class="tweet-container row">
  <div class="tweet-image"></div>
  <div class="column margin-left">
    <div class="row space-between">
      <h1>Some title</h1>
      <h2>Some other title</h2>
    </div>
    <h3>Some other stuff</h3>
    <h4>Icon container</h4>
  </div>
</div>

Or by using CSS grid:

.tweet-container {
  border: 1px solid lightgray;
  border-radius: 15px;
  padding: 25px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}

.tweet-image {
  background-color: black;
  width: 200px;
  height: 200px;
  grid-column: 1;
  grid-row: 1/3
}

h1 {
  grid-column: 2;
}

h2 {
  grid-column: 3;
}

h3 {
  grid-column: 2/3;
  grid-row: 2;
}

h4 {
  grid-column: 2/3;
  grid-row: 3
}

<div class="tweet-container">
  <div class="tweet-image"></div>
  <h1>Some title</h1>
  <h2>Some other title</h2>
  <h3>Some other stuff</h3>
  <h4>Icon container</h4>
</div>