Put two different texts in the same place of an HTML page - html

Question

I would like to put a text written in French on an HTML page and his hidden translation in English at the same place. A click on a JavaScript button will show the English text instead of the French one, by changing the Visibility attribut of each markup containing the text.
Maybe it's not the best way to do this sort of thing but I have to do it like this.
I've tried the following HTML and CSS code :
.presentationField {
vertical-align: text-top;
margin-left: auto;
margin-right: auto;
width: 500px;
border: 2px dashed blue;
}
<div id="frenchField" class="presentationField">
<h1>Les villes du Québec</h1>
<form>
Veuillez saisir le nom d'une ville au Québec<br>
<input type="text" id="recherche">
</form>
</div>
<div id="englishField" class="presentationField">
<h1>Cities of Québec</h1>
<form>
Please type the name of a town located in the province of Québec<br>
<input type="text" id="recherche">
</form>
</div>
But it doesn't work : the English text is below the French one and I can't figure out why.

Answer 1

If the text should be in the same exact location, use the CSS position property to overlap them. You may also have to make use of the z-index property depending on your desired result.
Example:
p{ color:red; font-size:200%; }
#alt{ color:blue; position:relative; top:-70px; }
<p>Regular Word</p>
<p id ="alt">French Word</p>
Or you could use display:none instead of visibility:hidden which removes the element from the layout rendering as well.

Answer 2

You can do something like this, just flip the visibility:
function change() {
document.getElementById('frenchField').style.display = 'none';
document.getElementById('englishField').style.display = 'block';
}
.presentationField {
vertical-align: text-top;
margin-left: auto;
margin-right: auto;
width: 500px;
border: 2px dashed blue;
}
#englishField {display: none;}
button {margin: auto; width: 200px; display: block}
<div id="frenchField" class="presentationField">
<h1>Les villes du Québec</h1>
<form>
Veuillez saisir le nom d'une ville au Québec
<br>
<input type="text" id="recherche">
</form>
</div>
<div id="englishField" class="presentationField">
<h1>Cities of Québec</h1>
<form>
Please type the name of a town located in the province of Québec
<br>
<input type="text" id="recherche">
</form>
</div>
<button onclick="change()"> FR -> EN </button>
You can also check which one is active first if you wish to be able to go back to French.

Answer 3

You should not put the translation as Hidden behind any other element. You should grab it from somewhere and just set the innerHTMLValue value.
function Translate(Language)
{
if(Language=='English')
{
document.getElementById("myBox").innerHTML = "Hi";
}
else
{
document.getElementById("myBox").innerHTML = "Hola";
}
}
Then you can simply pass the language. You should construct the Language Library as a Javascript object since that would be really the best way based on object oriented design and future requests may come that requires this solution.