<div class="figma-flex">
  <div class="block red"></div>
  <div class="block orange"></div>
  <div class="block purple"></div>
  <div class="block blue"></div>
  <div class="block green"></div>
</div>

<div class="figma-grid">
  <div class="block red"></div>
  <div class="block orange"></div>
  <div class="block purple"></div>
  <div class="block blue"></div>
  <div class="block green"></div>
</div>

body {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
}
.block {
  width: 5rem;
  height: 5rem;
}
.red {
  background: #f24e1e;
  border-radius: 50% 0 0 50%;
}
.orange {
  background: #ff7262;
  border-radius: 0 50% 50% 0;
}
.purple {
  background: #a259ff;
  border-radius: 50% 0 0 50%;
}
.blue {
  background: #1abcfe;
  border-radius: 50%;
}
.green {
  background: #0acf83;
  border-radius: 50% 0 50% 50%;
}
.figma-flex {
  max-width: 10rem;
  display: flex;
  flex-wrap: wrap;
}
.figma-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 10rem;
}