<div class="wrapper">

<div class="example safe">
  <div class="box">One</div>
  <div class="box">Two Two</div>
  <div class="box">Three Three Three</div>
</div>

<div class="example unsafe">
  <div>One</div>
  <div>Two Two</div>
  <div>Three Three Three</div>
</div>
  
</div>
* {box-sizing: border-box;}

body {
  background-color: grey;
  font: .9em/1.3 Helvetica, Arial, sans-serif;
}

.wrapper {
  background-color: white;
  width: 800px;
  margin: 40px auto;
  padding: 10px;
}

.example {
  margin-bottom: 40px;
  gap: 10px;
  display: flex;
  flex-direction: column;
  width: 100px;
  align-items: safe center;
}

.example div:last-child {
  width: 400px;
  background-color: rgb(255,157,10);
}

.example > * {
  border-radius: 10px;
  background-color: rgb(43,91,128);
  color: white;
  padding: 10px;
}

.example.safe {
  align-items: safe center;
}

.example.unsafe {
  align-items: unsafe center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.