I have 2 blocks with the image and text. I need to center all of them vertically and horizontally.
I use flexbox, but when the text is longer - between image and text appears padding.
How to remove this padding [1](https://i.stack.imgur.com/CWrl3.png)

```css
.product-teaser {
  width: 235px;
  height: 340px;
  margin: 10px;
}
img {
  margin-right: 5px;
}
.product-teaser-stock {
  font-size: 10px;
  font-family: "Open Sans";
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 17px;
}
```

```html
<!DOCTYPE html>
<html>
<head>
  <title>Another simple example</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="product-teaser">
    <div class="product-teaser-stock product-teaser-stock-undefined date-available" style="color:#009900;">
    <img class="free-shipping-icon" width="30" src="https://shop.dev.pictureserver.net/images/pic/70/3c/undef_src_shop_shop_id_1_type_shipping_image.png" alt="" title="">
    <span class="stock_title">FREE shipping, available from 03.02.2021</span>
  </div>
  <div class="product-teaser">
      <div class="product-teaser-stock product-teaser-stock-undefined date-available" style="color:#009900;">
      <img class="free-shipping-icon" width="30" src="https://shop.dev.pictureserver.net/images/pic/70/3c/undef_src_shop_shop_id_1_type_shipping_image.png" alt="" title="">
      <span class="stock_title">FREE shipping</span>
    </div>
</div>
</body>
</html>
```