CSS: Move Icon Closer to Overflowed Text

Question

I would like to move the icon closer to the text making them both centered in the container, but the text took up all the remaining space of the container.

Here's the code:

.container {
  width: 150px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background-color: #F3F3F3;
}

span {
  text-align: center;
}

i {
  margin-left: 4px;
}

<div class="container">
  <span>Lorem ipsum dolorsit amet, consectetur adipiscing</span>
  <i class="material-icons">face</i>
</div>

Here's a fiddle to playaround: https://jsfiddle.net/ar71y0n6/

Here's how the code currently works.

Here's the expected output:

Answer 1

You can defined max-width: 70% or as your need in span tag. In my snippet you can show red border for how much space covering by span tag after defined max-width.

I hope below snippet will help you a lot.

*{box-sizing: border-box;}
.border{
    box-shadow: inset 0 0 0 1px red;
}
.container {
    width: 150px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background-color: #F3F3F3;
    margin-top: 10px;
}
.container-w200{width: 200px;}
.container-w300{width: 300px;}
span {
    max-width: 70%;
    text-align: center;
}
i {
    margin-left: 4px;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div class="container">
    <span>Lorem ipsum dolorsit amet, consectetur adipiscing</span>
    <i class="material-icons">face</i>
</div>

<div class="container">
    <span class="border">Lorem ipsum</span>
    <i class="material-icons border">face</i>
</div>

<div class="container container-w200">
    <span class="border">Lorem ipsum dol orsit amet, conse ctetur adip iscing</span>
    <i class="material-icons border">face</i>
</div>

<div class="container container-w300">
    <span>Lorem ipsum dolorsit amet, consectetur adipiscing</span>
    <i class="material-icons">face</i>
</div>

<div class="container container-w300">
    <span class="border">Lorem ipsum</span>
    <i class="material-icons border">face</i>
</div>

Answer 2

Adjust setting for yourself that i given i hope it will work

i {
  position: relative;
  left: 20%;
  */Turn into px if percentage dont work*/ top: 30%;
  z-index: -1;
}

Answer 3

Credits to SHAHIL MASHIRA, for the idea of giving the span a width.

Here's the resolution code:

.container {
  width: 150px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background-color: #F3F3F3;
  margin-bottom: 8px;
}

span {
  text-align: center;
  max-width: 95px;
}

i {
  margin-left: 4px;
}

I used max-width so that the short texts aren't affected.

Here's the updated jsfiddle: https://jsfiddle.net/ar71y0n6/1/