JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent_1">
  <div class="first_group_block_1">
    <div class="block_1"></div>
    <div class="block_1"></div>
    <div class="block_1"></div>
  </div>
</div>


<div class="parent_2">
  <div class="first_group_block_2">
    <div class="block_2"></div>
    <div class="block_2"></div>
    <div class="block_2"></div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent_1, .parent_2 {
  display: flex;
  border: 5px solid red;
}

.first_group_block_1, .first_group_block_2 {
  display: flex;
  min-width: 0;
  border: 5px solid green;
  margin-bottom: 10px;
}

.block_1, .block_2 {
  width: 200px;
  height: 200px;
  background: grey;
  margin-right: 10px;
}

.block_1:nth-child(3) {
  margin: 0;
}

.block_2:nth-child(3) {
  margin: 0;
}


/*for first example*/
.parent_1 {
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

/*for second example*/
.parent_2 {
  flex-direction: column;
  justify-content: center;
}