side by side alignment of a fieldset and a textarea

   <div className="formContainer">
            <InputBox types={"Questions"} setText={setQuestion} submit={submit} />
            <InputBox types={"Solutions"} setText={setAnswer} submit={submit} />
    </div>

The code above showcases my HTML markup. InputBox is a React component that contains a text area nested within fieldsets.

.formContainer {
    display: flex;
}

.inputBox {
    flex: 1;
    resize: none;
    line-height: 30px;
    border-radius: 0px;
    border-style: none;
    width: 100%;
    max-width: 100%;
}

I aim to have two text areas aligned side by side within fieldsets with 50% width each. However, the current code results in the text areas shrinking and floating leftward. Please see the attached screenshots for reference (https://i.sstatic.net/YBoVK.png, https://i.sstatic.net/UsvZe.png). Any advice on how I can rectify this issue would be highly appreciated.

htmlcss

Answer №1

Is your code accomplishing its task?

I'm not familiar with React, but I noticed you have 

<div className="formContainer">
. In pure HTML, it should be 
<div class="formContainer">
. Additionally, make sure to assign a class to InputBox:

Though I lack experience in React, to align 2 objects in the same row using CSS, you must apply the following styles to the main container:

display: flex;
flex-direction:row;

Furthermore, consider reducing the width of .inputBox, as setting it to 100% would prevent them from aligning next to each other.

Answer №2

My knowledge of React InputBox is limited, but it seems that you may not have assigned the .inputBox class to your inputBox component.

You might want to consider something like this:

<div className="formContainer">
   <InputBox types={"Questions"} setText={setQuestion} submit={submit} className="inputBox" />
   <InputBox types={"Solutions"} setText={setAnswer} submit={submit} className="inputBox" />
</div>

Aside from that, I have created a basic HTML mockup that resembles what you are aiming for:

.formContainer {
      display: flex;
      gap: 10px;
  }
  fieldset {
    position: relative;
    padding: 0;
    margin: 0;
    height: auto;
    border: none;
  }
  fieldset label {
    position: absolute;
    top: -15px;
    left: 7px;
    background: white;
    padding: 6px;
  }
  .inputBox {
      flex: 1;
      resize: none;
      line-height: 30px;
      border-radius: 10px;
      padding: 5px 12px;
  }

<div class="formContainer">
  <fieldset>
    <label for="questions">Questions</label>
    <textarea name="questions" rows="3" cols="20" class="inputBox" placeholder="Questions"></textarea>
  </fieldset>
  <fieldset>
    <label for="solutions">Solutions</label>
    <textarea name="solutions" rows="3" cols="20" class="inputBox" placeholder="Solutions"></textarea>
  </fieldset>
</div>

I hope this provides some assistance for you.

Additionally, here is a codepen link where you can view the mockup in action:

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

Adjust the content of a table cell using jQuery

<td>09 Mars 2020</td> Using the string above, I have created a div. Here are the Jquery variables I am working with: date1 = 09 Mars 2020 date2 = 18 Mars 2020 My goal is to combine the content from another date with the existing date to ach ...

javascriptjqueryhtml

Connection between overlay div and corresponding destination div address

I created a linked image with an overlay div: <div class="imageBlock"> <a href="http://www.google.com"> <img src="https://placeimg.com/640/480/any"> </a> <a href="http://www.twitter.com"> <img src="https://pl ...

javascriptjqueryhtmlcss

What is the proper way to safely escape a JSON string for an object that contains user-generated content?

How can I correctly use the variable s for the value-field of an option-element while escaping user input used for key and value? var key='highway'; var value='track'; var s = JSON.stringfy({ [key]:value }, undefined,''); s ...

javascripthtmljsonescapinguser-input

Creating a loading spinner in a Vue component while using the POST method

After successfully creating a loader for fetching data using the GET method, I encountered challenges when attempting to do the same with POST method. Is there a reliable way to implement a loader during the POST data process? For GET method, I set the lo ...

javascripthtmlcssvue.jsvuejs2

Outdated JavaScript Alert

Is it possible to use JavaScript to create an alert message in my input field when a past date is selected? I would like the warning to say "past date, please enter a valid date." <html lang="en"> <head> <meta charset="U ...

javascripthtml

The correct functionality of canvas coordinates may become unreliable once CSS has been implemented

After successfully setting up my drag and drop game in canvas, I decided to make my canvas responsive by adding the following code to my css file: #canvas { width:100% } However, this adjustment caused a discrepancy in my coordinates. Now, when I cli ...

csshtmlcanvasresponsive-design

What is the method for setting a video as the background of my div?

I've been trying to set a Youtube video as the background of my div. After researching online, I found that many people followed these steps: Welcome Easy to use. S ...

htmlcss

Issue with Angular 2 - Basic form validation no longer functioning

The Angular 2 application I've been working on includes a simple form with input fields and basic HTML validation. Here's an example: <form (onSubmit)="submit()"> <input type="email" /> <input type="submit" value="save" /> ...

htmlformsangularvalidation

What sets the Name Attribute apart from the Name Token in HTML?

I was exploring the safety of using spaces in a name attribute and found varying opinions, with most agreeing that it is safe due to the Name attribute's utilization of CDATA token rather than a Name token. However, I am struggling to grasp the exact ...

htmltoken

Learn the secret to displaying and concealing images with jquery!

I'm working on enhancing a question I recently published. After scrolling down the page 200px, the image changes its size. I'm also looking to implement additional functions that I'm struggling to make work. Specifically, I want to achiev ...

javascriptjqueryhtmlcss

Saving downloaded web pages as an HTML document

I'm looking to extract the HTML content of a webpage. Within this HTML, there are two specific elements with XPaths that I need to retrieve. Unfortunately, my knowledge on this subject is quite limited. While searching for solutions, most examples in ...

c#html.net

Dividing a button within a flex container

I'm currently building a contact form and I applied display:flex to its div. All the fields are showing up properly and dynamically resizing, except for the submit button which always gets cut in half. Shouldn't it behave like the rest of t ...

htmlcssflexbox

Creating a clickable button that will trigger a function when pressed, continuously running the function until the button is released

I am currently working on a project where I am trying to make an object move using an HTML button. However, the function is only executed once with a single click, whereas I want it to execute continuously as long as the button is pressed down. Below is ...

javascripthtmlthree.js

When CSS 3 checkbox value is toggled to "off", it returns as null

I am currently using a checkbox element with the following HTML: <div class="onoffswitch"> <input type="checkbox" name="showOnNavigation" class="onoffswitch-checkbox" id="showOnNavigation" checked> <label class="onoffswitch-label" f ...

htmlcss

Using Mat-Error for Two Way Binding leads to frequent triggering of ngModelChange事件

I am working with a mat input field that has two-way data binding using ngModel, and I want to add validation using mat-error and formControl. <mat-form-field [formGroup]="myForm"> <input matInput formControlName="myFormName" autocomplete="off" ...

htmlangulartypescript

Can you please provide the CSS code that would style this table in a similar manner?

I am interested in utilizing the design of this table, but how can I update it to meet CSS standards and HTML5 equivalents? <html> <head></head> <body> <table border="1" bordercolor="#000000" style="background-color:#ffffff" w ...

htmlcss

Tips for customizing fonts in a WordPress object

WordPress is sending me an object that I need to work with. The main issue at hand: the font styles of WordPress posts in my app are all inconsistent. How can I go about styling these fonts uniformly? Take a look at this Plunkr if you'd like to expe ...

angularjscss

Tips on automatically changing the background image every few seconds

As a newcomer to Angular and programming in general, I am facing an issue with changing the background image of my Page using the setInterval method. The intended behavior is for it to change every second, but for some reason, it changes much faster than t ...

htmlangulartypescriptsetinterval

Variety of HTML tags yet identical ID

Is it possible to have two elements with different types – such as a div and an ul with the same id in HTML? Here is an example of HTML code: <div id="articleOptions"> <ul id="articleOptions"> <li>Share</li> ...

htmlcss

From PHP to Drupal Node with HTML transformations

Currently, I am developing a custom module on Drupal. Within this module, I have a requirement where users should be able to upload a PDF file. Once uploaded, the module should create a Node of type 'decision.' In the 'field_decision_text&ap ...

phphtmlpdfpdf-conversionnode-html-pdf