How to start a new line and align the newline with another item within flexbox?

Issue

I have a flexbox with different items inside.

When it wraps onto a new line I want to align this new line with the 2nd item on the first row of the flexbox, but I can't figure out how to do this. The width of the elements will be dynamic, based on the text inside.

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: flex;
  flex-wrap: wrap;
  width: 300px;
}

.unique_element {
  background-color: Crimson;
  width: 30%;
  padding: 10px 10px 10px 10px;
}

.child {
  background-color: CornflowerBlue;
  padding: 10px 10px 10px 10px;
}

<div class="parent">
  <div class="unique_element">First</div>
  <div class="child">Second</div>
  <div class="child">Third</div>
  <div class="child">Fourth</div>
  <div class="child">Fifth</div>
</div>

Solution

You can create two divs inside the parent div, one that holds the unique element and one that holds generic children. That's how you get the separation

<div class="parent">
  <div class="unique-wrapper">
    <div class="unique_element">First</div>
  </div>
  <div class="child-wrapper">
    <div class="child">Second</div>
    <div class="child">Third</div>
    <div class="child">Fourth</div>
    <div class="child">Fifth</div>
  </div>
</div>

Style the CSS as shown. Note .unique-wrapper has flex: 3 because you set the width of the element as 30%.

div {
  font-family: arial, sans-serif; 
  margin: 5px;
  color: white;
  border: 1px dotted black;
}

.parent { 
  display: flex;
  width: 300px;
}

.unique_element {
  background-color: Crimson;
  padding: 10px 10px 10px 10px;
}

.unique-wrapper, .child-wrapper {
  border: none;
  margin: 0;
}

.unique-wrapper {
  flex: 3;
}

.child-wrapper {
  flex: 7;
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: auto;
  background-color: CornflowerBlue;
  padding: 10px 10px 10px 10px;
}

Here is my codepen if you want to play with the code.

Answered By - random person