I'm having trouble getting a user input and button to appear side by side and stay sticky at the top of the screen as you scroll. I've attempted using the float: left method and display:inline-block, but haven't had any success. Here is the code snippet:
<div id="user-input-and-button">
<input id="user-input" />
<button id="send-button" onClick={writeUserData}>send</button> }
</div>
Here's what I've tried:
#user-input{
width: 70%;
float:left;
height:auto;
padding: 12px 20px;
border: 1px solid #2c2c2c;
border-radius: 40px;
font-size: calc(5px + 4vmin);
position:fixed;
}
#send-button{
float:left;
width: 7%;
height:auto;
min-height: 30px;
min-width: 30px;
position:fixed;
}
And also:
#user-input{
width: 70%;
height:auto;
padding: 12px 20px;
border: 1px solid #2c2c2c;
border-radius: 40px;
font-size: calc(5px + 4vmin);
position:fixed;
display:inline-block;
}
#send-button{
width: 7%;
height:auto;
min-height: 30px;
min-width: 30px;
position:fixed;
display:inline-block;
}