How to Vertically Center Logo and Icons with Respect to the First Row in Footer?

Question

I'm working on a footer layout and I'm having trouble aligning the elements as I want them. I need the "Logo" and the icons in the "icon-container" to be vertically centered with respect to the first line of text in the "text-container", not with respect to both lines of text. Additionally, the "Imprint" text should remain horizontally centered with respect to "A long long text".

Here's the relevant HTML and CSS code:

html, body {
  margin: 0;
}

footer {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;

  p {
    margin: 0;
  }
}

div.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}

.icon-container {
  display: flex;
  column-gap: 5px;
}

<footer>
  <div class="row">
    <p>Logo</p>
    <div class="text-container">
      <p>A long long text</p>
      <p>Imprint</p>
    </div>
    <div class="icon-container">
      <p>Icon 1</p>
      <p>Icon 2</p>
      <p>Icon 3</p>
    </div>
  </div>
</footer> 

I want the "Logo" and the icons to be vertically centered with the first line of text ("A long long text") and not with the second line of text ("Imprint"). Also, "Imprint" should stay horizontally centered with "A long long text". How can I achieve this layout?

Answer 1

Ralph.m's solution will work for a small amount of text:

.row {
 align-items: flex-start;
}

html, body {
  margin: 0;
}

footer {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;

  p {
    margin: 0;
  }
}

div.row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}

.icon-container {
  display: flex;
  column-gap: 5px;
}

<footer>
  <div class="row">
    <p>Logo</p>
    <div class="text-container">
      <p>A long long text</p>
      <p>Imprint</p>
    </div>
    <div class="icon-container">
      <p>Icon 1</p>
      <p>Icon 2</p>
      <p>Icon 3</p>
    </div>
  </div>
</footer>

However when you have multiple lines of text, it won't do what you want:

html, body {
  margin: 0;
}

footer {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  padding: 10px;

  p {
    margin: 0;
  }
}

div.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
}

.icon-container {
  display: flex;
  column-gap: 5px;
}

<footer>
  <div class="row">
    <p>Logo</p>
    <div class="text-container">
      <p>A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text.</p>
      <p>Imprint</p>
    </div>
    <div class="icon-container">
      <p>Icon 1</p>
      <p>Icon 2</p>
      <p>Icon 3</p>
    </div>
  </div>
</footer>

You could solve for this with grid, but you'll need to change your markup and explicitly size your columns:

body {
  margin: 0;
}

footer {
  background-color: black;
  color: white;
  display: grid;
  grid-template-columns: 1fr 8fr 2fr;
  grid-template-rows: fit-content fit-content;
  padding: 10px;
  p {
    margin: 0;
  }
}

.icon-container {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

footer>* {
  display: grid;
  place-content: center;
}

footer>p:last-child {
  grid-area: 2 / 2 / 3 / 3;
}

<footer>
  <p>Logo</p>
  <div class="text-container">
    <p>A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text.
      A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long text. A long long
      text.
    </p>

  </div>
  <div class="icon-container">
    <p>Icon 1</p>
    <p>Icon 2</p>
    <p>Icon 3</p>
  </div>
  <p>Imprint</p>
</footer>