CodePen Embed - Different ways to force two list items to take the width of the longest

<div class="grid">
  <div class="col">
    <h2>✔ Grid</h2>
    <dl class="contact-list">
      <div class="contact-list__item">
        <dt class="sr-only">Email</dt>
        <dd>
          <a href="mailto:contact@email.co.uk" class="c-icon-button c-icon-button--right">
            <span class="c-icon-button__detail">contact@email.co.uk</span>
            <span class="c-icon-button__icon c-icon-button__icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.7 23"><use href="#email-icon" /></svg>
            </span>
          </a>
        </dd>
      </div>
      <div class="contact-list__item">
        <dt class="sr-only">Call</dt>
        <dd>
          <a href="tel:0117123456" class="c-icon-button c-icon-button--right">
            <span class="c-icon-button__detail"><span class="c-icon-button__label" aria-hidden="true">Call</span>0117 123 456</span>
            <span class="c-icon-button__icon c-icon-button__icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><use href="#phone-icon" /></svg>
            </span>
          </a>
        </dd>
      </div>
    </dl>
  </div>

  <div class="col">
    <h2>✔ Inline-block</h2>
    <dl class="contact-list contact-list--inline-block">
      <div class="contact-list__item">
        <dt class="sr-only">Email</dt>
        <dd>
          <a href="mailto:contact@email.co.uk" class="c-icon-button c-icon-button--right">
            <span class="c-icon-button__detail">contact@email.co.uk</span>
            <span class="c-icon-button__icon c-icon-button__icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.7 23"><use href="#email-icon" /></svg>
            </span>
          </a>
        </dd>
      </div>
      <div class="contact-list__item">
        <dt class="sr-only">Call</dt>
        <dd>
          <a href="tel:0117123456" class="c-icon-button c-icon-button--right">
            <span class="c-icon-button__detail"><span class="c-icon-button__label" aria-hidden="true">Call</span>0117 123 456</span>
            <span class="c-icon-button__icon c-icon-button__icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><use href="#phone-icon" /></svg>
            </span>
          </a>
        </dd>
      </div>
    </dl>
  </div>

  <div class="col">
    <h2>✔ Inline-flex</h2>
    <dl class="contact-list contact-list--inline-flex">
      <div class="contact-list__item">
        <dt class="sr-only">Email</dt>
        <dd>
          <a href="mailto:contact@email.co.uk" class="c-icon-button c-icon-button--right">
            <span class="c-icon-button__detail">contact@email.co.uk</span>
            <span class="c-icon-button__icon c-icon-button__icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.7 23"><use href="#email-icon" /></svg>
            </span>
          </a>
        </dd>
      </div>
      <div class="contact-list__item">
        <dt class="sr-only">Call</dt>
        <dd>
          <a href="tel:0117123456" class="c-icon-button c-icon-button--right">
            <span class="c-icon-button__detail"><span class="c-icon-button__label" aria-hidden="true">Call</span>0117 123 456</span>
            <span class="c-icon-button__icon c-icon-button__icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><use href="#phone-icon" /></svg>
            </span>
          </a>
        </dd>
      </div>
    </dl>
  </div>

  <div class="col">
    <h2>✗ Flex</h2>
    <dl class="contact-list contact-list--flex">
      <div class="contact-list__item">
        <dt class="sr-only">Email</dt>
        <dd>
          <a href="mailto:contact@email.co.uk" class="c-icon-button c-icon-button--right">
            <span class="c-icon-button__detail">contact@email.co.uk</span>
            <span class="c-icon-button__icon c-icon-button__icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34.7 23"><use href="#email-icon"</svg>
            </span>
          </a>
        </dd>
      </div>
      <div class="contact-list__item">
        <dt class="sr-only">Call</dt>
        <dd>
          <a href="tel:0117123456" class="c-icon-button c-icon-button--right">
            <span class="c-icon-button__detail"><span class="c-icon-button__label" aria-hidden="true">Call</span>0117 123 456</span>
            <span class="c-icon-button__icon c-icon-button__icon--right">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23"><use href="#phone-icon" /></svg>
            </span>
          </a>
        </dd>
      </div>
    </dl>
  </div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 34.7 23.6"><path id="email-icon" d="M31.9 0H2.8C1.3 0 0 1.2 0 2.8v18c0 1.5 1.3 2.8 2.8 2.8h29.1c1.5 0 2.8-1.2 2.8-2.8v-18c0-1.5-1.3-2.8-2.8-2.8zm-3.3 6.7l-11.2 9.9L6.2 6.7c-.3-.3-.4-.8-.1-1.1.3-.3.8-.4 1.1-.1l10.2 9 10.2-9c.3-.3.8-.3 1.1.1.3.3.3.8-.1 1.1z"/><path id="phone-icon" d="M22 3.8c1.9 4.2 1.2 7.8-3.5 13.2-3.2 3.8-9.5 8.1-16.2 4.7-.2-.1-.4-.2-.5-.3L.2 19.3c-.4-.5-.3-1.2.2-1.6l4.5-3.4c.5-.3 1.2-.3 1.5.2L8 16.6c.3.4.5 1.1-.2 2.2 2.8.6 5.7-2.2 7.6-4.2 2.3-2.5 3.5-4.6 3.2-6.5-.8.2-1.3.2-1.6.1L14.7 7c-.5-.3-.8-.9-.5-1.5L16.7.6c.3-.5.9-.8 1.5-.5l2.3 1.2.4.4c.4.7.8 1.4 1.1 2.1z"/></svg>

@import url("https://fonts.googleapis.com/css?family=Montserrat:700");

$green: #278f27;
$fuscia: #e84b99;
$white: white;

@function rem($size) {
  $remSize: $size / 16px;
  @return #{$remSize}rem;
}

body {
  font-family: Montserrat, sans-serif;
  background: $green;
  color: $white;
  padding: rem(20px);
}

.grid {
  display: grid;
  gap: rem(40px);
  
  @media (min-width: 50rem) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.col {
  padding: rem(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.contact-list {
  font-weight: 700;
  display: grid;
  grid-template-columns: minmax(0, max-content);

  dt,
  dd {
    margin: 0;
  }

  > * + * {
    margin-top: rem(20px);
  }
}

.c-icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: $green;
  background-color: $white;
  padding: rem(5px) rem(5px) rem(5px) rem(25px);
  border-radius: 999px;
  transition: color 200ms;
  justify-content: flex-start;

  &:hover,
  &:focus {
    color: $fuscia;
  } 
}

.c-icon-button__icon {
  display: flex;
  flex: 0 0 auto;
  border-radius: 50%;
  width: rem(25px);
  height: rem(25px);
  background-color: $fuscia;
  color: $white;
  align-items: center;
  font-size: rem(20px);
  padding: rem(10px);
  margin-left: auto;

  svg {
    fill: $white;
    width: 100%;
    height: 100%;
  }
}

.c-icon-button__label {
  margin-right: rem(10px);
}

.c-icon-button__detail {
  flex: 0 1 auto;
  margin-right: rem(20px);
  overflow-wrap: anywhere;
}

.sr-only {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Inline-block */
.contact-list--inline-block {
  display: inline-block;
  margin: 0;
}

/* Inline-flex */
.contact-list--inline-flex {
  display: inline-flex;
  flex-direction: column;
  margin: 0;
}

/* Flex */
.contact-list--flex {
  display: flex;
  flex-direction: column;
}

View Compiled

This Pen is owned by Michelle Barker on CodePen.

See more by @michellebarker on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.