Arrange components within the form

Just started experimenting with this a few days ago.

In my form, there is a text field and a button that I want to align side by side at the center of the form.

.row {
  width: 100%;
  margin-bottom: 20px;
  display: flex; flex-wrap: wrap;
}
.col-6 {
  width: 50%;
}

.form {
  margin 0 auto;
  display: block;
}
<div class='grid'> 
  <div class='row'>
    <div class='col-6'>
      <form class='form'>
        <input type ='text' name='userGuess' class='userGuess'/>
        <button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
      </form>
    </div>
  </div>
</div>

I've attempted various methods but none seem to achieve the desired result.

Note: Only basic CSS framework included, not complete code.

Thank you.

javascripthtmlcss

Answer №2

To organize the elements, I included a Div to contain both of them. Below is the revised CSS code with a new class named Container.

.row {
  width: 100%;
  margin-bottom: 20px;
  display: flex; flex-wrap: wrap;
}
.col-6 { width: 50%; }

.form {
  margin: 0 auto;
  display: block;
}
.container{
  width:100%;
  padding:1%;
}

Now here's the updated HTML with the addition of the new Div.

<div class='grid'> 
  <div class='row'>
    <div class='col-6'>
      <form class='form'>
        <div class="container">
          <input type ='text' name='userGuess' class='userGuess'/>
          <button type='button' name='submitBtn' value='Submit' class='submitBtn'>Submit</button>
        </div>
      </form>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Amusing antics observed when hovering over a div in Firefox

Issue resolved, many thanks to all Here is the dilemma I am dealing with something like this <a href='http://google.com' class="buy_now" > <div class='yada yada' > Go </div> </a> buy_now changes backgro ...

cssfirefoxhtmlhover

Controlling an AJAX request to fetch individuals

I am currently using an ajax request to display people data on the page, which is retrieved from a backend database. The search form on the page includes options for location, sector, service, and job title. Below is the javascript code being used: //var ...

javascriptjqueryajax

Utilizing JSTL: Executing a function within <script> through the c:set tag in JSTL

Can someone help me with this code snippet? <c:set var="cls" value="${myFunction(param)}"/> ..... <script> function myFunction(param) { if(param == true) { return "aaa"; } else { return "bbb"; ...

javascriptjstl

Tips for utilizing the "this" keyword in JavaScript in conjunction with the change function

I'm currently facing an issue with the change function. I have two dropdowns that are dependent on each other. Whenever the first dropdown changes, it triggers a change in the second dropdown as well. I achieved this functionality using jQuery AJAX. H ...

javascriptjqueryajax

Converting TypeScript to ES5 in Angular 2: A Comprehensive Guide

I am currently diving into Angular 2 and delving into Typescript to create simple applications within the Angular 2 framework. What I have discovered is that with Typescript, we can utilize classes, interfaces, modules, and more to enhance our application ...

javascriptangulartypescript

Apigee Usergrid: Absence of bulk delete feature

Currently, I am utilizing usergrid for storage in a customer project. The data is divided into two collections: carShowrooms and cars. Thus far, everything has been running smoothly. However, there arises a situation where I need to refresh the masterdata ...

javascriptnode.jsapigeeusergrid

Adjusting the size of the background image without altering the background color

I am looking to create a background with a gradient color and an overlay background image. The image is simply a transparent icon, but I need to adjust its size without altering the overall background dimensions. Any assistance on this matter would be gre ...

htmlcssbackground-image

Eliminating the Scrollbar from Bootstrap 4 DataTable Causes Table Width to Decrease

My tables are causing a horizontal scroll bar to appear when converted to Bootstrap data tables. Adding the "p-3" class to the table's div for padding eliminates the scroll bar but also narrows the table. Is there a solution to removing the scroll b ...

htmlcssbootstrap-4datatablesspacing

Handling error reporting using JSON in jQuery AJAX post success

UPDATE: I have resolved the PHP errors mentioned in previous Answers, however, the issue still persists. I am attempting to implement an error message display in case of a failed POST request and a success message for successfully completed requests. Curr ...

javascriptphpjqueryajaxjson

changing the core JavaScript of a keyboard plugin

To access the demo, click on this link: . You can find the main javascript file at https://raw.githubusercontent.com/Mottie/Keyboard/master/js/jquery.keyboard.js. Is there a way to switch the positions of the accept and cancel buttons? ...

javascriptjquery

What do you do when you need to hide a table column that has a colspan

I have been searching for a solution to my unique table structure, but I haven't found any that match my situation. When attempting to hide column A or B, the following code works perfectly: $('table td:nth-child(1),table th:nth-child(1)') ...

jqueryhtmlcsscss-selectors

Transmit a document to the OpenAI API without the need to interact with the file storage system

Is there a way to send file data to the OpenAI API without directly accessing the file system? I have the file contents stored as a string and would like to bypass reading from the file system. The code provided in the OpenAI documentation involves reading ...

javascriptnode.jsfile-uploadstreamopenai-api

Tips for retrieving the selected item from Material-UI DropDownMenu

Hello fellow StackOverFlow users, I am new here so please be patient with me In my React app, I am using Material-UI's DropDownMenu to collect information from users. However, the issue I'm facing is that the value being pushed to state is an in ...

javascriptreactjsmaterial-ui

Enhancing the efficiency of nested ajax calls loop

Disclaimer: While the final result is successful, I am struggling to comprehend the sequence in which a loop of nested ajax calls operates. Essentially, I have two ajax calls that fetch data from an external API using curl GET requests. They both rely on ...

javascriptjqueryajaxcurlnested-loops

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

htmlcssvideo

Only the cursor CSS is applied to the parent div, not its individual elements within the div

The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...

jqueryhtmlcss

Can you explain why this unexpected bootstrap positioning is happening?

On my website, I have two large buttons (btn-lg) - one is placed at the top of the page with a hidden form beneath it (initially set to display: none), and the other button is below that with another hidden form. When clicked, the buttons reveal their resp ...

csstwitter-bootstrap

Identify when a user switches tabs within the browser and when they switch applications away from the

I am interested in understanding the behavior of the tab's visibility state when a user switches tabs in a specific browser and when they switch out of the application entirely (switching away from the browser). var visibilityState, activeTab = ( ...

javascriptjquery

Issue with Express/Node.js route unable to access key values within an object

I am currently struggling with creating a node/express route that fetches data from a MongoDB collection and facing an infuriating issue. The collection in question is named nba_players_v2, and I've tried crafting the following route: router.get(&apo ...

javascriptnode.jsexpressget

creating interconnections between input fields by employing event listeners in JavaScript

I've been experimenting with binding multiple input fields to a span element using jQuery. Specifically, I have two input fields containing integer values and the sum of these values is displayed in a span element. I want the span element to update wh ...

javascriptjquery