A necessidade é o pai da invenção

Suponha que tenhamos uma div de container e queremos posicionar alguns elementos dentro desse container, mais precisamente uma imagem à esquerda e um texto à direita.

O mais importante é que ao redimensionar a janela do browser os elementos mantenham seu posicionamento, sem encavalar ou sair do lugar correto de exibição

Ponto de partida : a div container só com um texto básico:

Para aplicar uma classe ao texto vou colocar ele dentro de um span.

Como é exibida:

Como foi definida:

    <style>
        .divx {
            margin:10px;
            padding:30px;
            background-color:lightblue;
            border-radius:3px 4px;
            border:1px solid blue;
        }
    </style>

        <div class="divx">
            <span>Texto dentro da div container>/span>
        </div>

Passo 1 : Adicionando uma imagem ao texto

Vamos supor que eu queira colocar a imagem à esquerda do texto. Escolhi uma imagem qualquer.

Como é exibida:

Como esperado, os 2 elementos são do tipo inline e foram exibidos um ao lado do outro.

Passo 2 : Posicionando os elementos

Vamos supor que queremos a imagem alinhada à esquerda do container ocupando uns 30% dele no máximo e o texto alinhado ao centro do restante do container (outros 70% do container).

Passo 2.1 : Posicionando os elementos-Texto ao centro

Como é exibida:

Dentro da span de texto coloquei : style="text-align:center".

Como esperado não funcionou porque os elementos 'em linha' são exibidas pelo browser com o padrão display:static e com isso o próprio browser dimensiona a largura, altura que o elemento precisa para ser exibido corretamente.

Portanto a primeira coisa é remover o padrão display:static de exibição do elemento.

Alternativa 1 : Usando float

A primeira vista parece um bom recurso para ser aplicado mas tem alguns detalhes que fazem com que não seja adequado ao que queremos. Primeiramente porque float tem apenas 'direito'(right) e 'esquerdo' (left) mas não tem centrado como desejamos exibir o nosso texto

Para efeito de testes vamos aplicar o style="float:left" na imagem e o style="float:right" na imagem:

Note que o tamanho da imagem e do texto foram desconsiderados pela tag div por usarmos o style="float".

Importante: para que a tag acima não ficasse sobre os elementos anteriores utilizei o parâmetro style="clear:both". Sendo assim a tag considerou o tamanho dos elementos anteriores mesmo sendo float e foi exibida corretamente.

Sempre que usar float ou display:relative coloque o parâmetro style="clear:both" na tag a seguir para que os elementos não se encavalem.

A primeira solução que nos vem a cabeça é colocar a div como style="float:left"" aí ela deverá considerar o tamanho dos elementos internos a ela.

Funcionou mas o tamanho da div não foi mais 100% da tela. Vou colocar no style width:100% para ver se corrige o problema. Ficou assim:

Funcionou.
Praticamente o único erro que temos é o texto alinhado no topo superior e a direita da div.

Tentei colocar no estilo:
vertical-align:central; e não funcionou

Vou colocar o parâmetro line-height:100px; no style do texto e ver como fica:

Funcionou...ficou alinhado no centro e redimensionando a largura do browser observei que ficou bom até que a largura do browser ficasse muito pequena, mas aí acredito que o defeito é mais pelo style="float:right;" do que pelo line-height:90px;.

Para alinhar o texto no centro da página não posso usar o float porque ele só alinha à esquerda ou à direita do container. Vou trocar o style="float:right;" por style="display:flex;"

Funcionou em partes, o elemento texto continuou alinhado ao centro mas foi deslocado para à esquerda.

Para alinhar ele ao centro vou usar o parâmetro justify-content:center no estilo. Ficou assim:

Funcionou perfeitamente, exepcionalmente bom. OK. Era o que queríamos. Finalmente pronto. Experimente redimensionar a largura do browser.

O código ficou assim:
        <div class="divx" style="float:left;width:100%">
            <img style="float:left" src="../imagens/esfera_2.png" />
            <span style="display:flex;justify-content:center;line-height: 90px;">Dentro da div container</span>
        </div>

Fazendo o contrário

Agora vou fazer exatamente como acima só trocando o texto com a imagem de posição.
A tag de texto foi colocada antes da tag de imagem.
Sendo assim, agora a imagem vai ficar à direita e o texto à esquerda.

Deu super errado mas já era esperado afinal a tag img esta com float left. Vou mudar para right:

Fiz algumas experiências mas deram errado:
1-Colocar no estilo do texto width:80%
2-Mudando no texto style="display:flex" para style="display:block"
3-Removi do style line-height: 90px;
4-Removi justify-content:center;
5-Removi style="display:flex;"

Deixei a tag de texto peladinha então a imagem foi exibida na mesma linha finalmente.

Contudo o alinhamento horizontal e vertical do texto foi perdido.
Voltei o estilo : line-height: 90px; mas mudei para 100px

O alinhamento vertical foi resolvido, mas o horizontal não. Fiz algumas experiências e obtive o seguinte resultado:

Finalmente ficou como desejavamos. OK. . O código é o seguinte:

        <div class="divx" style="display:flex;justify-content:center;align-items:center;">
            <span style="display:flex;width:80%;;justify-content:center">Dentro da div container</span>
            <img style="display:flex; width:20%" src="../imagens/esfera_2.png" />
        </div>