I have some multi-line text in some `inline-flex` `div`s which I am happy with until one of the lines of text wraps, due to its length. When that happens, it loses `justify-content` and the div becomes vertically misaligned from the group. I'm trying to keep the markup/styling as simple as possible. What's the easiest way to fix both problems?

```css
body {
  margin: 0;
  font: 12pt Arial;
}

.print {
  border: 1px dotted;
}

.label {
  width: 2.2in;
  height: 1.2in;
  padding: 0.1in;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
```

```html
<div class="print label">Joe Smith<br>1324 Anywhere Dr.<br>St. Charles, MO 63304<br></div>

<div class="print label">Johnny B. Goodfellowmasterfulman<br>5678 Anywhere Ave<br>St. Louis, MO 63144<br></div>

<div class="print label">Andrew Goodfellowmasterfulman<br>9110 Somewhere St<br>St. Louis, MO 63146<br></div>

<div class="print label">Joe Smith<br>1324 Anywhere Dr.<br>St. Charles, MO 63304<br></div>
```