How can I align button and input on the same line and get their results to display below both?

user_18984248 0
Viewed 76

I have a button and a search bar. The button is above the search bar. When I click on the button, it returns my data just above the search bar.

When I search, it returns it below the search bar, while still showing results from the initial button clicked - so I have two results on the page at the same time.

  1. How can I place the Get Data button and Search Cities search bar side by side?

  2. Make the results show below both buttons.

  3. How can I Prevent both results from showing at the same time without clearing the initial returned data?

Sharing my html and css code and an image of what i am getting with it:

.user-form {
  width: 100%;
  max-width: 700px;
}

.user-form input {
  width: 100%;
  display: block;
  background-color: #4c2885;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 1rem;
  margin-bottom: 2rem;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.1);
}

.user-form input::placeholder {
  color: #bbb;
}

.user-form input:focus {
  outline: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<button id="catalog" onclick="GetInfo()">Get Data</button>
<div id="data"></div>

<form class="user-form" id="form">
  <input type="search" id="input" placeholder="Search Cities">
</form>

<div id="myData"></div>

https://i.stack.imgur.com/ZCsEA.png

css html javascript
1 Answers

I dont have all your code. You can try this and Let me know. I put wrapper on both of your button and form to flex it. If you want it to appear below you should put them outside of a wrapper or below on all the buttons or forms you have. Let me know if this works for you? If not let me know.

.user-form {
  width: 100%;
  max-width: 700px;
}


.user-form input {
  width: 100%;
  display: block;
  background-color: #4c2885;
  border: none;
  border-radius: 10px;
  color: #fff;
  padding: 1rem;
  margin-bottom: 2rem;
  font-family: inherit;
  font-size: 1rem;
  box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05),
    0 15px 40px rgba(0, 0, 0, 0.1);
}

.user-form input::placeholder {
  color: #bbb;
}

.user-form input:focus {
  outline: none;
}

#catalog {
  height: 50px;
  }
  
.wrapper {
  display: flex;
  justify-content:left;
  grid-gap:10px;
  }
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="wrapper">
<button id="catalog" onclick="GetInfo()">Get Data</button>

<form class="user-form" id="form">
  <input type="search" id="input" placeholder="Search Cities">
</form>
</div>

<div id="data">This will appear here </div>
<div id="myData">this will appear here </div>

user_165130010
Related