is it possible to put this nightmode switcher near these horizontal line of flags from the right side and adjust the sizes properly, using only css and html, without any javascripts. can you do this without ruining functionality of displaying text on flag click, select text ability independent of nightmode state?: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS-only Multilingual eco-friendly site</title>
<style>
  .switch-container input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

.switch-container input[type="checkbox"]:checked ~ label:before {
  opacity: 1;
}
  
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  line-height: 1.6;
  background-color: #f7f7f7;
  transition: background-color .5s, color .5s;
}

header {
  background-color: #4CAF50;
  color: #FFF;
  padding: 16px 0px 0px 0px;
  text-align: center;
  position: relative;
  transition: background-color .5s;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  width: 90%;
  height: 1%;
}

.left, .right {
  position: relative;
}

.left::before, .right::before {
  content: '';
  position: absolute;
  top: 50%;
  border-bottom: 1px dashed #FFF;
  width: 40%;
}

.left::before {
  right: 100%;
  margin-right: 20px;
}

.right::before {
  left: 100%;
  margin-left: 20px;
}

.flags-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  --padding: 3px 0;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.flag-radio {
  display: none;
}

.flag-label {
  cursor: pointer;
  margin: 0 10px;
  transition: 0.3s;
  opacity: 0.6;
  font-size: 24px;
}

.flag-label:hover {
  opacity: 1;
}

.language-option {
  position: run-in;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding-top: 0px; 
}

#english-flag:checked ~ #english,
#hindi-flag:checked ~ #hindi,
#hebrew-flag:checked ~ #hebrew,
#chinese-flag:checked ~ #chinese,
#french-flag:checked ~ #french,
#spanish-flag:checked ~ #spanish {
  display: block;
}

#night-mode-toggle:checked ~ body,
#night-mode-toggle:checked ~ header,
#night-mode-toggle:checked ~ .language-option {
  background-color: #333;
  color: #FFF;
}

#night-mode-toggle:checked ~ .flags-container {
  background-color: #444;
}

#night-mode-toggle:checked ~ .switch-container label {
  color: #FFF;
}

.switch {
  position: absolute;
  cursor: pointer;
  width: 60px;
  height: 30px;
  background-color: #FFF;
  border-radius: 15px;
  transition: background-color .5s;
}

.switch:before {
  content: '';
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  height: 26px;
  width: 26px;
  background-color: #333;
  border-radius: 50%;
  transition: left .3s;
}

#night-mode-toggle:checked ~ .switch-container .switch {
  background-color: #444;
}

#night-mode-toggle:checked ~ .switch-container .switch:before {
  left: calc(100% - 28px);
}
</style>
</head>
<body>  
  <!-- Night Mode Switch -->
  <input type="checkbox" id="night-mode-toggle" />
  <div class="switch-container">
    <div class="switch"></div>
    <label for="night-mode-toggle">Energy saving nightmode layer</label>
  </div>
  
  <input id="english-flag" type="radio" name="flags" class="flag-radio">
  <input id="hindi-flag" type="radio" name="flags" class="flag-radio">
  <input id="hebrew-flag" type="radio" name="flags" class="flag-radio">
  <input id="chinese-flag" type="radio" name="flags" class="flag-radio">
  <input id="french-flag" type="radio" name="flags" class="flag-radio">
  <input id="spanish-flag" type="radio" name="flags" class="flag-radio">
  
<div class="flags-container">
  <label for="english-flag" class="flag-label">🇬🇧</label>  
  <label for="hindi-flag" class="flag-label">🇮🇳</label>
  <label for="hebrew-flag" class="flag-label">🇮🇱</label>
  <label for="chinese-flag" class="flag-label">🇨🇳</label>
  <label for="french-flag" class="flag-label">🇫🇷</label>
  <label for="spanish-flag" class="flag-label">🇪🇸</label>
</div><br>

<header>
  <h1>
    <span class="left">EcoWare</span>
    <span class="right">Earthwise</span>
  </h1>
</header>
  
<div id="english" class="language-option">
<p>english details going here</p>
</div>

<div id="hindi" class="language-option">
  <p>hindi details going here</p>
</div>

<div id="hebrew" class="language-option">
  <p>hebrew details going here</p>
</div>

<div id="chinese" class="language-option">
  <p>chinese details going here</p>
</div>

<div id="french" class="language-option">
  <p>french details going here</p>
</div>

<div id="spanish" class="language-option">
  <p>spanish details going here</p>
</div>
</body>
</html>