Is there a way to showcase a column alongside other columns in a inline format?

I'm having an issue with the design of my contact form. I want it to look like the picture at this link: here

However, my columns are displaying vertically and I would like the textarea (Message) to be inline with the input for Subject. Can someone please help me with this? Thank you!

My HTML: 

    
<section class="contact-form">
  <div class="container">
  
    <div class="formRow row">
      <div class="titleSection text-center">
        <h2 class="contact_text text-center">Contact Us</h2>
      </div>
      <form action="">

        <div class="col-md-6">

          <div class="form-group">
            <input type="text" class="form-control" placeholder="Subject" required>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email" required>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Name" required>
          </div>
          

        </div>
        
        <div class="col-md-6 m-0">
          <div class="form-group">
            <textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
          </div>
        </div>

        <div class="col-md-12 text-center mt-5">
          <div class="contact-btn text-center">
            <input type="sumbit" class="btn" value="Sent Message">
          </div>
        </div>

      
      </form>
      
    </div>
  </div>
</section>

My css:

    /***********************************************
           For Contact Section
************************************************/


.contact-form {
  padding: 56px 0 60px;
}

.formRow{
  display: block;
  flex-wrap: nowrap;
  margin-right: -15px;
  margin-left: -15px;
}

.contact_text{
  color: #990000;
  font-size: 40px;
  font-weight: 700;
}

.titleSection{
  margin-bottom: 30px;
}

.contact-form .form-group .form-control {
    border-radius: 0;
    padding: 20px;
    background: transparent;
    border-color: black;
    min-height: 70px;
    font-size: 16px;
    width: 100%;
    color: black;
}

.contact-form .form-group textarea {
  height: 240px;
}



.btn{
  letter-spacing: 0.1em;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  padding: 0px 0px;
  line-height: 45px;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  color:#fff;
  background-color: #990000;
}

Answer №1

Ensure that you wrap the columns within a row element

...
<div class="row">
  <div class="col-md-6">
    ...
  </div>
  <div class="col-md-6">
    ...
  </div>
  <div class="col-md-12">
    ...
  </div>
</div>
...

Please refer to the example provided below, noting that I have removed the md from the column classes due to the preview being smaller than the medium screen breakpoint

.contact-form {
  padding: 56px 0 60px;
}

.formRow{
  display: block;
  flex-wrap: nowrap;
  margin-right: -15px;
  margin-left: -15px;
}

.contact_text{
  color: #990000;
  font-size: 40px;
  font-weight: 700;
}

.titleSection{
  margin-bottom: 30px;
}

.contact-form .form-group .form-control {
    border-radius: 0;
    padding: 20px;
    background: transparent;
    border-color: black;
    min-height: 70px;
    font-size: 16px;
    width: 100%;
    color: black;
}

.contact-form .form-group textarea {
  height: 240px;
}



.btn{
  letter-spacing: 0.1em;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  padding: 0px 0px;
  line-height: 45px;
  max-width: 160px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  color:#fff;
  background-color: #990000;
}
<link href = "https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="83e1ececf7f0f7f1e2f3c3b7adb3adb3">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<section class="contact-form">
  <div class="container">
  
    <div class="formRow row">
      <div class="titleSection text-center">
        <h2 class="contact_text text-center">Contact Us</h2>
      </div>
      <form action="">
         <div class="row">
        <div class="col-6">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Subject" required>
          </div>
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email" required>
          </div>
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Name" required>
          </div>
       </div>
        
        <div class="col-6 m-0">
          <div class="form-group">
            <textarea name="text" id="" class="form-control" cols="74" rows="3" placeholder="Message"></textarea>
          </div>
        </div>

        <div class="col-12 text-center mt-5">
          <div class="contact-btn text-center">
            <input type="sumbit" class="btn" value="Send Message">
          </div>
        </div>
        </div>

      
      </form>
      
    </div>
  </div>
</section>

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

Arranging a div's position in relation to an unrelated div

I need to position a div element called "a" below another div element known as "b". The HTML code has the following structure: <div id="a"></div> <form> <div id="b"></div> <div id="c"></div> </form> U ...

Another option to replace the file_get_contents function

I am attempting to retrieve JSON data from the following URL: . When using the file_get_contents() function, I encountered the following error message: Error Message: require(): https:// wrapper is disabled in the server configuration by allow_url_fope ...

Keep one div attached to the edge of another div to ensure they remain conjoined when resizing

Is there a way to center a Square within the border of another div? I have attempted the following method: .container { position: relative; background-color: blue; } .square { position: absolute; height: 50px; width: 50px; border-radius: 0% ...

Can the Android Browser Display Seamless IFRAMES?

Did you know that HTML5 offers support for a seamless IFRAME? This feature allows you to easily include headers and footers in your HTML code. However, when I tested this on the Android (2.2) browser, which is supposed to be HTML5-based, it didn't wor ...

How can I line up two divs horizontally within a container div?

Apologies if my terminology is off, I am relatively new to this. My goal is to align two divs horizontally, one containing an image and the other the message content. I have created a messaging user interface. Everything was functioning correctly until I ...

Tips for organizing elements onto separate pages for printing while avoiding overflow onto additional pages

I am encountering an issue while attempting to print tables and an image on separate pages. Every time I print, an additional page spills over into a third page, causing overflow. How can I eliminate this extra space or overflow that results in a third pa ...

Flex Item will only respect the margin or padding when both are set simultaneously

I've been playing around with CSS and running into a problem where a flexbox item isn't respecting margin and padding correctly, causing the right side to have no margin. Here's a simplified example I came up with: <body> <div c ...

Using jQuery to create links from the content of table cells

I have a beautiful table <table id="#table1"> <tr> <td class="column1">apple</td> <td class="column2">#orange</td> </tr> <tr> <td class="column1">banana</td> <td class=" ...

"Freezing a column in an HTML table causes a disruption in

I'm struggling to make the layout of the following link work properly: http://jsfiddle.net/Tc5Xk/ Could someone offer assistance with this? div.dashboardBox { border: 1px solid #999999; width: 45%; margin-right: 20px; margin-bott ...

Having trouble with your Bootstrap modal not opening automatically when the page loads?

I have a modal that is successfully opening with a button: <button onclick="content()" data-toggle="modal" data-target="#my_modal">Save</button> <form action="addPage.php" method="post"> <div class="modal fade" id="my_modal" tabind ...

Has the mouse entered the user-drawn section of the canvas?

Essentially, a user has the ability to upload a picture and then paint on it, saving the result. Another user can view the photo and if they click in the same area that was painted, something will happen. This means that User 1 can make an area clickable f ...

Tips for creating a div that gracefully fades out its background image when hovered over, while keeping the internal content unaffected

I am looking to create a hover effect on a div element that has a background-color, background-image, and text. What I want is for the background-image to slowly disappear when the div is hovered over, while keeping the text and background color visible. I ...

Do HTML buttons without values get sent in a form submission?

When you have a button with the following code: <button class="button yellow" type="submit" name="button">Log in</button> and you submit it, what exactly gets sent to the server for this specific button that has a name attribute but no value ...

I am currently having difficulty with aligning the divs

Is there a way to align the divs perfectly on the page? I was hoping they would align automatically, but that didn't happen. Can someone share the code to align them at the end border of the page and space them apart evenly? I managed to separate the ...

Utilizing Vue 3 slot styles in a child component

Issue with Scoped Styling and Child Component: I am facing a problem while trying to style the contents of a <slot> within a child component using scoped css. Despite applying styles, they do not reflect as expected. The scenario involves two compon ...

Guide on how to modify the CSS styling of a particular <td> element when its parent contains a specific class

.webgrid-table td, th { border: 1px solid #98bf21; padding: 3px 7px 2px; } I am facing an issue where the style defined above is being applied to all td elements. However, I want to exclude the styling for a td that is within a tr element with the ...

What is the best way to apply a png overlay to each img tag when hovered over?

Here is the code snippet I am working with: <div class="latest-post"> <a href="http://localhost/blaze/2011/documentaries/test-big-thumb" rel="bookmark"> <span> <img width="140" height="100" src="http:// ...

Exploring the world of Django static files, along with the magic of CSS and

Currently running on django 1.3 for production and encountering an issue with using static files in my CSS and JavaScript. Strangely, there are no problems in my HTML code! How can I resolve this dilemma? Unfortunately, the Django documentation does not pr ...

Chrome fails to apply CSS to Polymer 2 web component

The implementation of my web component in Polymer v2 is causing a styling issue specifically in Google Chrome. Despite including a CSS file that defines a style called n-action-button, the styling is not being applied to the content of the web component in ...

What is preventing the user from editing this bootstrap table?

I recently created a bootstrap table which looks like this: https://i.sstatic.net/tNg2T.png Below is the HTML code for the table: <div class="card card"> <div class="header"> <div class="typo-line"> <h4>S ...