Con un addEventListener puedes registrar el evento "change", con este puedes obtener el valor de tu select y dependiendo del valor puedes mostrarlo dentro de un div o cualquier otro elemento que quieras.
<div style="display: flex;">
<select name="tipoPlan" id="tipoPlan" class="form-select">
<option value="" disabled selected>Selecciona el tipo de plan</option>
<option value="Individual-CLINIGOLD">Individual CLINIGOLD 50$</option>
<option value="Individual-ESMERALDA">Individual ESMERALDA 125$</option>
<option value="Familiar-CLINISEGURO">Familiar CLINISEGURO 500$</option>
</select>
<div id="price"></div>
</div>
<script>
const priceDiv=document.getElementById("price")
document.getElementById('tipoPlan').addEventListener("change",(event)=>{
if(event.target.value=="Individual-CLINIGOLD"){
console.log(50)
priceDiv.innerText="50";
}
if(event.target.value=="Individual-ESMERALDA"){
console.log(125)
priceDiv.innerText="125";
}
if(event.target.value=="Familiar-CLINISEGURO"){
console.log(500)
priceDiv.innerText="500";
}
})
</script>
También puedes poner el precio dentro del value de cada option
<div style="display: flex;">
<select name="tipoPlan" id="tipoPlan" class="form-select">
<option value="" disabled selected>Selecciona el tipo de plan</option>
<option value="50">Individual CLINIGOLD 50$</option>
<option value="125">Individual ESMERALDA 125$</option>
<option value="500">Familiar CLINISEGURO 500$</option>
</select>
<div id="price"></div>
</div>
<script>
document.getElementById("tipoPlan").addEventListener("change",e=>{
console.log(e.target.value)
document.getElementById("price").innerText=e.target.value;
})
</script>
value
, me parece que en tu caso deberían ser únicosdirection: rtl;
(rigth to left) aoption
, ¿luce como esperás?