Estou tentando alcançar o efeito ilustrado abaixo:

no meu site (http://new.freshsourdoughexpress.com/contact/), mas não consigo pensar no HTML e CSS corretos para fazê-lo funcionar. A única maneira de conseguir que o mapa flutue à direita é colocar o iframe antes da div do texto, mas não posso deixar o mapa cair abaixo do texto quando diminuo a largura. Atualmente, estou sem idéias, então espero que alguém possa apontar o óbvio. Obrigado!

EDIT - Desculpe, eu postei isso como eu estava correndo pela porta e não postou informações suficientes. Atualmente, tenho um layout responsivo (tema WP Twenty Thirteen). Se eu definir o texto div comofloat: left e o mapa iframe parafloat: right a div do texto ocupa 100% da largura e o mapa cai abaixo. Estou tentando não definir uma largura na div de texto porque quero que ela seja redimensionada com a janela. (Estou tentando manter as dimensões do mapa iguais e redimensionar o texto para caber. Usar uma largura percentual no texto exigiria que eu fizesse o mesmo com o mapa, o que estou tentando não fazer.)

Se eu colocar o iframe primeiro no meu HTML, o mapa permanecerá no topo (os três primeiros quadros do GIF) sem definir uma largura (em px ou%), mas não será possível deixar o mapa cair abaixo o texto. Para alcançar o último quadro, tive que mover o iframe de volta abaixo do texto.

Então, eu estou querendo saber se é possível obter o que eu estou procurando sem definir uma largura para a div do texto. Se não houver, suponho que posso viver com o redimensionamento do mapa. Eu estava tentando fazer isso sem ele.