Iframes nebeneinander mobil-geeignet

IFrame ist generell für mobile Anwendungen in den meisten Fällen ungeeignet.
In deinem Fall kannst du die beiden iFrame per float nebeneinander platzieren. Die Abstände kannst du per margin-left oder margin-right variieren.
Das nächste Problem wird die Höhe sein. Ein height: auto; hilft dir hier nicht weiter. Eine Möglichkeit wäre per JavaScript die Höhe dynamisch zu variieren.

 

Du hast deinen ersten Iframe innerhalb eines <p><iframe..></iframe></p> platziert. das <p> beansprucht 100% der Breite und verhindert, so wie ich es einschätze, jeglichen Versuch irgendwas neben das erste Iframe zu positionieren.
Versuche mal diesem <p> eine Klasse zuzuteilen (zb <p class="wetterframe">)
Diese Klasse solltest du dann eine Breite passend zum Iframe geben, das Attribut float: left; und margin ganz nach deinen Bedürfnissen.
Der folgende Iframe muss dann auch mit float: left; positioniert werden - sonstiges wieder nach deinen Bedürfnissen
Und nicht vergessen... nach dem Frame das float durch clear: all wieder aufzuheben.

 

Die iframes sind jeweils in ein <p> verpackt, siehe aktueller HTML-Quellcode der Seite:

view-source:https://14ks.de/wetter/

WordPress verpackt Absätze jeweils in ein <p> ...

 

Das ist das, was dir Wordpress 'vorgaukelt' - du siehst sie nicht in der Textansicht, aber sie sind da. Werden automatisch von Wordpress gesetzt.
Was du aber versuchen solltest, ist Wordpress zu überlisten und ein <p class="irgendein_name"><iframe....></iframe></p> in deine Textansicht des Dokumentes zu schreiben.
Das sollte Wordpress dann auch so übernehmen und nicht noch zusätzlich irgendwelche HTML Codes in dein Dokument schmuggeln.
Mit dem zugewiesenen Klassennamen kannst du dann mit CSS gezielt dieses <p>-Element ansprechen und formatieren.


Nachtrag:
Es wäre vielleicht sogar sinnvoller, statt des <p>-Elementes ein <div>- Element zu nutzen. also so..

<div class="irgendein_name"><iframe....></iframe></div>

 

Habe gerade nochmal näher auf dein Problem geschaut! Es ist sogar noch etwas komplizierter, denn nicht nur der IFrame, sondern auch das darüber liegende Bild befinden sich innerhalb des <p>...</p>.
Hier mal ein Screenshot, wie das mit dem FireFox Inspector aussieht.
Dieser blau hinterlegte Bereich im oberen Teil markiert die Ausdehnung des <p> Elementes, dass im unteren Code-Teil markiert ist!