I have a container with 2 children. First child is an icon and second is text. I want to align the icon left and the title center using Flexbox only.

The HTML code and the CSS code:

```css
.container {
  display: flex;
  background-color: #7D8F99;
  width: 100%;
  height: 50px;
}

.title {
  display: flex;
  background-color: #9AADB8;
}

.icon {
  display: flex;
  background-color: #1AADA9;
}
```

```html
<div class="container">
  <span class="icon">icon</span>
  <span class="title">text</span>
</div>
```

<https://jsfiddle.net/eajosjoh/>