I want to align my div item next to each other and want when a person hover on checkbox or the image span tag content show on right screen but running the code you can see it the div overflow of the screen
#hide_name{
display: none;
background-color: white;
color: black;
padding: 3px;
box-sizing: content-box;
border-radius: 2px;
}
#img{
margin: 2rem;
}
.programming_language > div:hover #hide_name{
display: inline;
}
.programming_language{
margin-left: 10px;
margin-right: 10px;
display: flex;
}
.programming_language > div{
padding: 10px;
}<div id="id_programming_language" class="programming_language"><div>
<label for="id_programming_language_0"><input type="checkbox" name="programming_language" value="1" class="programming_language" id="id_programming_language_0">
<img id="img" src="https://www.svgrepo.com/show/331553/python-package-index.svg" width="50px" class="prog_lang"><span id="hide_name">Python</span></label>
</div><div>
<label for="id_programming_language_1"><input type="checkbox" name="programming_language" value="2" class="programming_language" id="id_programming_language_1">
<img id="img" src="https://www.svgrepo.com/show/43101/java.svg" width="50px" class="prog_lang"><span id="hide_name">java</span></label>
</div><div>
<label for="id_programming_language_2"><input type="checkbox" name="programming_language" value="3" class="programming_language" id="id_programming_language_2">
<img id="img" src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/c-program-icon.png" width="50px" class="prog_lang"><span id="hide_name">C</span></label>
</div><div>
<label for="id_programming_language_3"><input type="checkbox" name="programming_language" value="4" class="programming_language" id="id_programming_language_3">
<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1822px-ISO_C%2B%2B_Logo.svg.png" width="50px" class="prog_lang"><span id="hide_name">C++</span></label>
</div><div>
<label for="id_programming_language_4"><input type="checkbox" name="programming_language" value="5" class="programming_language" id="id_programming_language_4">
<img id="img" src="https://seeklogo.com/images/C/c-sharp-c-logo-02F17714BA-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">C#</span></label>
</div><div>
<label for="id_programming_language_5"><input type="checkbox" name="programming_language" value="6" class="programming_language" id="id_programming_language_5">
<img id="img" src="https://seeklogo.com/images/G/go-logo-046185B647-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">go</span></label>
</div><div>
<label for="id_programming_language_6"><input type="checkbox" name="programming_language" value="7" class="programming_language" id="id_programming_language_6">
<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/Unofficial_JavaScript_logo_2.svg/2048px-Unofficial_JavaScript_logo_2.svg.png" width="50px" class="prog_lang"><span id="hide_name">javascript</span></label>
</div><div>
<label for="id_programming_language_7"><input type="checkbox" name="programming_language" value="8" class="programming_language" id="id_programming_language_7">
<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/1200px-Typescript_logo_2020.svg.png" width="50px" class="prog_lang"><span id="hide_name">typescript</span></label>
</div><div>
<label for="id_programming_language_8"><input type="checkbox" name="programming_language" value="9" class="programming_language" id="id_programming_language_8">
<img id="img" src="https://upload.wikimedia.org/wikipedia/en/thumb/5/56/Perl_language_logo.svg/1200px-Perl_language_logo.svg.png" width="50px" class="prog_lang"><span id="hide_name">perl</span></label>
</div><div>
<label for="id_programming_language_9"><input type="checkbox" name="programming_language" value="10" class="programming_language" id="id_programming_language_9">
<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/PHP-logo.svg/2560px-PHP-logo.svg.png" width="50px" class="prog_lang"><span id="hide_name">php</span></label>
</div><div>
<label for="id_programming_language_10"><input type="checkbox" name="programming_language" value="11" class="programming_language" id="id_programming_language_10">
<img id="img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Ruby_logo.svg/1200px-Ruby_logo.svg.png" width="50px" class="prog_lang"><span id="hide_name">ruby</span></label>
</div><div>
<label for="id_programming_language_11"><input type="checkbox" name="programming_language" value="12" class="programming_language" id="id_programming_language_11">
<img id="img" src="https://seeklogo.com/images/S/scala-logo-8570724313-seeklogo.com.png" width="50px" class="prog_lang"><span id="hide_name">scala</span></label>
</div><div>
<label for="id_programming_language_12"><input type="checkbox" name="programming_language" value="13" class="programming_language" id="id_programming_language_12">
<img id="img" src="https://cdn4.iconfinder.com/data/icons/logos-3/504/Swift-2-512.png" width="50px" class="prog_lang"><span id="hide_name">swift</span></label>
</div>
</div>
</div>i want something like this
span content only show on hovering and all the option stay in screen not overflow of the screen