so I want to make it thats when you hover the input, the input extends to the full length of the div covering the whole span - i tried different option but they just dont work.
* {
font-family: monospace;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 330px;
height: 30px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
#input1 {
margin-left: 15px;
width: 70px;
transition: .8s;
}
#input1:hover {
width: 300px;
margin: 0px 15px;
}<div class="container">
<span class="span1">what do you have to do?</span>
<input id="input1" type="text" placeholder="">
</div>i would be so gratefull if you just tried do help
If I understand your goal correctly, then you can solve this problem by using position: absolute; on the #input1.
* {
font-family: monospace;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
width: 330px;
height: 30px;
border: 1px solid black;
display: flex;
justify-content: left;
align-items: center;
}
#input1 {
margin-left: 35%;
width: 70px;
transition: .8s;
position: absolute;
}
#input1:hover {
width: 300px;
margin: 0px 15px;
}
.span1 {
display: inline-block;
float: left;
margin-left: 20px;
}<div class="container">
<span class="span1">what do you have to do?</span>
<input id="input1" type="text" placeholder="">
</div>You can try this:
.container {
width: 330px;
height: 30px;
padding: 0 10px;
border: 1px solid black;
display: flex;
align-items: center;
}
#input1 {
margin-left: 250px;
width: 70px;
transition: .8s;
z-index: 10;
}
#input1:hover {
width: 100%;
margin: auto 0;
}
.span1 {
position: absolute;
}<div class="container">
<span class="span1">what do you have to do?</span>
<input class="input1" id="input1" type="text" placeholder="">
</div>