When using flex wrap, how to space the next line as wide as the width of the first element of the first line? [duplicate]

When using flex wrap, I want the next line to be spaced as wide as the first element of the first line. Also, what should I do to make the height of the first element of the first line the same as that line?

<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>

div {  margin: 5px;}.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;}

current results

when the height increases

the result I want

As the height of first increases, the length of second and third must also increase, but in the current code, only first is longer. I searched and found that there is a way to add a hidden element, but I cannot give a classname to a specific element using data.map. What should I do?

I recently posted a similar question, but failed to find an answer. help. I'm desperate.