.

form-container {
width: 969px;

height: 900px;

margin: 0 auto;

.form-container h4 {
text-align: left;
padding-left: 140px;
font-size: large;
}

.form-container p {
text-align: left; /* Align p to the left */
position: relative; /* Add relative positioning */
padding-bottom: 15px;
padding-left: 140px;
padding-top: 30px;
}

.form-container p::after {
content: ""; /* Add an empty content */
position: absolute; /* Set position to absolute */
bottom: -5px; /* Position it below the paragraph */
left: 0; /* Align it to the left */
width: 100%; /* Set the width to cover the entire paragraph */
border-bottom: 1px solid #ccc; /* Add the horizontal line */
}

.form-container label {
width: 100%;
text-align: right; /* Align labels to the right */
padding-left: 120px;
}
.form-row{
padding-left: 60px;
width: 700px;

.form-container input[type="text"],
.form-container textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: all 0.3s ease;
}

button {
background-color: #4caf50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
 cursor: pointer;
transition: all 0.3s ease;
}

button:hover {
background-color: #3d71f5;
}

.label {
display: flex;
justify-content: space-between; /* Align items to the right */
text-align: left; /* Align labels to the left */
padding-left: 0px;
width: 20px;
height: 40px;
margin-bottom: 15px;
}

.form-container .span {
padding-left: 20px;
font-size:small;
padding-top: 13px;

.form-container input[type="text"],
.form-container textarea {
width: calc(100% - 150px); /* Adjusted width for input and textarea */
/* This calculation assumes each span has a width of 150px */
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
transition: all 0.3s ease;
}

.button-container {
display: flex;
justify-content: flex-end; /* Align button to the right */
margin-top: 15px; /* Add margin for spacing */
}
.p{
right :100px;
margin-right: 20px;
}
.remaining-characters{
padding-top: 30px;
font-size:smaller;
padding-left: 650px;
padding-top: 0px;
}
.button {
margin-top: 20px; /* Adjust as needed */
margin-top: 50px;
right: 70px;

margin-left: 420px;
 margin-bottom: 80px;
background-color: #0d40ae;
max-width: 320px;
height: auto;
width:200px ;
height:40px ;
font-size: medium;
font-style: B;
}
.checkbox-label {
margin-top: 50px;
display: flex;
align-items: center;
}

.checkbox-label input[type="checkbox"] {
margin-right: 5px;
margin-top: 8px;
font-size: 10pt;
margin-right: 30px;

}
.description-row {
margin-bottom: 15px; /* Adjust as needed */
margin-right: 700px;

}
.label2{
display: flex;
justify-content: space-between; /* Align items to the right */
text-align: left; /* Align labels to the left */
padding-left: 0px;
width: 20px;
height: 40px;
margin-bottom: 15px;
}

&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

import React, { useState } from 'react';

import './FormComponent.css'; // Import the CSS file

const FormComponent = () => {

const [subjects, setSubjects] = useState('Maths');
const [headline, setHeadline] = useState('');
const [description, setDescription] = useState('');
const [lessonsTaught, setLessonsTaught] = useState('');
const [aboutYou, setAboutYou] = useState('');
const [location, setLocation] = useState('');
const [locationPreference, setLocationPreference] = useState('');
const [levels, setLevels] = useState('');
const [hourlyRate, setHourlyRate] = useState('');

const handleSubjectsChange = (e) => {

setSubjects(e.target.value);
 };

const handleHeadlineChange = (e) => {

setHeadline(e.target.value);
};

const handleDescriptionChange = (e) => {

setDescription(e.target.value);
};

const handleLessonsTaughtChange = (e) => {

setLessonsTaught(e.target.value);
};

const handleAboutYouChange = (e) => {

setAboutYou(e.target.value);
};

const handleLocationChange = (e) => {

setLocation(e.target.value);
};

const handleLocationPreferenceChange = (e) => {

setLocationPreference(e.target.value);
};

const handleLevelsChange = (e) => {

setLevels(e.target.value);
};

const handleHourlyRateChange = (e) => {

setHourlyRate(e.target.value);
};

const remainingCharacters = 2000 - description.length;

const handleSubmit = (e) => {

e.preventDefault();
// Handle form submission here
console.log('Form submitted:', { subjects, headline, description,
lessonsTaught, aboutYou, location, locationPreference, levels, hourlyRate });
};

return (
<form className="form-container" onSubmit={handleSubmit}>
<h4>Complete your information</h4>
<p>Briefly tell potential students what you teach and what your lessons are
like:</p>
<div className="size">
<div className="form-row">
<label className="label">
<span className="span">Subjects:</span>
<input
type="text"
value={subjects}
onChange={handleSubjectsChange}
placeholder=""
/>
</label>
</div>
<div className="form-row">
<label className="label">
<span className="span">Headline:</span>
<input
type="text"
value={headline}
onChange={handleHeadlineChange}
/>
</label>
</div>
<div className="form-row">
<label>
<span>Description:</span>
<textarea
value={description}
onChange={handleDescriptionChange}
maxLength={2000}
/>
</label>
</div>
<div className="form-row">
<label className="label">
<span className="span">Lessons Taught:</span>
<input
type="text"
value={lessonsTaught}
onChange={handleLessonsTaughtChange}
/>
</label>
</div>

<div className="form-row">
<label className="label2">
<span>About You:</span>
<textarea
value={aboutYou}
onChange={handleAboutYouChange}
/>
</label>
</div>
<div className="form-row">
<label className="label">
<span className="span">Location:</span>
<input
type="text"
value={location}
onChange={handleLocationChange}
/>
</label>
</div>
<div className="form-row">
<label className="label">
<span className="span">Location Preference:</span>
<input
type="text"
value={locationPreference}
onChange={handleLocationPreferenceChange}
/>
 </label>
</div>
<div className="form-row">
<label className="label">
<span className="span">Levels:</span>
<input
type="text"
value={levels}
onChange={handleLevelsChange}
/>
</label>
</div>
<div className="form-row">
<label className="label">
<span className="span">Hourly Rate:</span>
<input
type="text"
value={hourlyRate}
onChange={handleHourlyRateChange}
/>
</label>
</div>
<button className='button'>Post my ad now</button>
</div>
</form>
);
};

export default FormComponent;