<ul>
  <li>Logical</li>
  <li>properties</li>
  <li>are</li>
  <li>super</li>
  <li>awesome</li>
</ul>

ul {
  display: flex;
  gap: 1ch;
  flex-wrap: wrap;
  max-inline-size: 30ch;
}

li {
  display: inline-flex;
  padding-inline: 2ch;
  padding-block: 1ex;
  border: 2px solid hsl(200 100% 50%);
  color: hsl(200 100% 30%);
  border-radius: 5ch;
}

p {
  max-width: 30ch;
}

p:last-child {
  margin-block-end: 0;
}

html {
  block-size: 100%;
  inline-size: 100%;
}

body {
  min-block-size: 100%;
  min-inline-size: 100%;
  margin: 0;
  padding: 2ch;
  box-sizing: border-box;
  display: grid;
  place-content: center;
  font-family: system-ui;
  font-size: 1.3rem;
  line-height: 1.5;
  background: hsl(200 20% 95%);
  color: hsl(200 30% 25%);
}