Container queries

by Andrew Bone

HTML

<div class="site">
  <main class="content">
    <div class="contact-card">
      <img class="contact-card__profile-image" src="https://randomuser.me/api/portraits/women/31.jpg" alt="profile" />
      <div class="contact-card__profile-information">
        <h1>Both Names</h1>
        <p>Some info about me</p>
      </div>
    </div>
  </main>
  <aside class="side-panel">
    <div class="contact-card">
      <img class="contact-card__profile-image" src="https://randomuser.me/api/portraits/women/31.jpg" alt="profile" />
      <div class="contact-card__profile-information">
        <h1>Both Names</h1>
        <p>Some info about me</p>
      </div>
    </div>
  </aside>
</div>

CSS

html,
body,
.site {
  height: 100%;
  margin: 0;
}

.site {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
}

/* Just some simple css to get it started */

main {
  width: calc(100% - 232px);
  background: #ccc;
}

aside {
  width: 232px;
  background: tomato;
}

main.content,
aside.side-panel {
  container: layout / inline-size;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  background-color: white;
  padding: 2em;
  box-sizing: border-box;
  border-radius: 2px;
  margin: 1em;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.2),
    0 1px 1px rgba(0, 0, 0, 0.4);
}

.contact-card__profile-image {
  height: 50px;
  width: 50px;
  border-radius: 50px;
  border: 1px solid black;
}

.contact-card__profile-information {
  margin-left: 0.5em;
}

.contact-card__profile-information h1 {
  text-align: center;
  margin: 0;
  font-size: 1.2em;
}

.contact-card__profile-information p {
  text-align: center;
  margin: 0.5em 0 0 0;
}

@container layout (min-width: 450px) {
  .contact-card {
    width: 300px;
    flex-direction: row;
    align-items: flex-start;
  }

  .contact-card__profile-information h1 {
    text-align: left;
  }

  .contact-card__profile-information p {
    text-align: left;
  }
}