Update the styling of the forms

src/App.css

@@ -269,3 +269,22 @@ footer {
     color:#444;
   }
 }
+
+.searchbar {
+  padding-bottom: 0.3em;
+}
+
+.searchterm {
+  border: 1px solid #666;
+  border-radius: 0.3em;
+  padding: 0.15em 0.15em 0.15em 0.15em;
+  width: 15em;
+}
+
+.languages {
+  border: 1px solid #666;
+  border-radius: 0.3em;
+  padding: 0.15em 0.15em 0.15em 0.15em;
+  width: 15.4em;
+
+}

src/App.js

@@ -229,11 +229,7 @@ function App() {
         <h1>
           <a href="https://ebookfoundation.github.io/free-programming-books/">free-programming-books</a>
         </h1>
-        <div>
-          <SearchBar changeParameter={changeParameter} />
-          <LangDropdown changeParameter={changeParameter} data={data} />
-        </div>
-        <br />
+
         <p>
           <img
             class="emoji"
@@ -245,6 +241,13 @@ function App() {
           />{" "}
           Freely available programming books
         </p>
+
+        <div>
+          <SearchBar changeParameter={changeParameter} />
+          <LangDropdown changeParameter={changeParameter} data={data} />
+        </div>
+        <br />
+
         <p class="view">
           <a href="https://github.com/EbookFoundation/free-programming-books">
             View the Project on GitHub <small>EbookFoundation/free-programming-books</small>

src/components/LangDropdown.js

@@ -45,7 +45,7 @@ function LangDropdown({ changeParameter, data }) {
     });
   // console.log(options);
   return (
-    <select onChange={handleChange} name="languages" id="languages">
+    <select onChange={handleChange} name="languages" id="languages" class="languages">
       <option key="allLangs" value="">
         All Languages
       </option>

src/components/SearchBar.js

@@ -18,6 +18,7 @@ function SearchBar(props) {
         type="text"
         name="searchTerm"
         placeholder="Enter Book Name"
+        className="searchterm"
         onChange={handleChange}
       />
     </form>