RESPONSIVE IMAGE ON RIGHT SIDE - html

Question

Im trying to position my image on the right side of my screen and my text on the left, but make the image responsive as i resize my browser.
#fmap{
position: absolute;
right: 0%;
margin-right: 0;
display:block;
margin:10px;
width: 100%;
height: auto;
border: 12px double #d3d3d3;
max-width:850px;
}
<div class="maptext" id="facilitymap">
<p><a href="https://www.google.co.uk/maps/dir//Colman+House,+University+of+East,+Norwich+NR4+7TJ/#52.6212166,1.244658,17z/data=!4m9!4m8!1m0!1m5!1m1!1s0x47d9e1e20deda5b1:0x60290452cbfc9649!2m2!1d1.2468467!2d52.6212134!3e0">
<img src="https://4.img-dpreview.com/files/p/E~TS590x0~articles/3925134721/0266554465.jpeg" alt="" id="fmap" >
</a>
</p>
</div>

Answer 1

Here is one way using flexbox on the parent div;
.container {
/*this makes the parent container into a flex container*/
/*divs within this parent container become responsive flex items*/
display: flex;
}
.left {
padding: 20px;
}
#facilitymap {
width: 100%;
}
img {
width: 100%;
}
#media screen and (max-width: 600px) {
.container {
/*switch to column view when screen is 600px or smaller*/
flex-direction: column;
}
}
<div class="container">
<div class="left">
<p>left side text</p>
</div>
<div class="maptext" id="facilitymap">
<a href="https://www.google.co.uk/maps/dir//Colman+House,+University+of+East,+Norwich+NR4+7TJ/#52.6212166,1.244658,17z/data=!4m9!4m8!1m0!1m5!1m1!1s0x47d9e1e20deda5b1:0x60290452cbfc9649!2m2!1d1.2468467!2d52.6212134!3e0">
<img src="https://cdn.pixabay.com/photo/2020/07/27/14/34/stars-5442598__340.jpg" alt="" id="fmap">
</a>
</div>
</div>