Criar dois "Blocos" dentro de tag pai (header)

Olá,

Como é que consigo dividir a tag header em duas partes, uma com 30% do seu tamanho e a segunda com 70%?

Vejam aqui s.f. https://jsfiddle.net/z2hjL2fd/

O que pretendo é colocar a imagem no lado esquerdo e o paragrafo do lado direito. Não consigo entender o porque que ele imprime a tag figure numa "linha" e a tag p noutra linha! Se repararem o texto "Mensagem" está abaixo, depois da parte inferior da imagem. Como fazo para que consiga ter dois blocos dentro da tag header?

Nota:

Pelo que percebi, o float faz o elemento flutuar dentro da tag pai, neste exemplo a tag header. Os filhos das tags que tem propriedade float, neste caso figure e p, irão ser ajustados dentro dessas mesmas tag's.

É correcto pensar que os filhos de figure e p respondem perante eles, e não perante a tag header?

O que pretendo exemplificar é que se caso pretenda criar uma nova tag img dentro de figure apenas me terei que preocupar com o tamanho de figure, pois o tamanho das duas tag's img irão se calculadas considerando o tamanho do pai (figure), certo?

Desculpe se com a minha nota acabei por confundir mais o assunto, mas digam coisas :)

Obrigado e bons códigos