HTML & CSS Changing position of sign in and sign up form

[sallu110]

Hye! I want the sign up and sign in form to be place horizontally in the middle of the page . Currently they are placed on top of each other.

[CODE title="Code"]
</section>
<div class="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign In</h2>
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600">Email</label>
<input type="text" id="full-name" name="full-name" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Password</label>

<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focusutline-none hover:bg-indigo-600 rounded text-lg">Sign in</button>
</div>
<br>
<div class="lg:w-2/6 md:w-1/2 bg-gray-100 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign Up</h2>
<div class="relative mb-4">
<label for="full-name" class="leading-7 text-sm text-gray-600">Full Name</label>
<input type="text" id="full-name" name="full-name" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Email</label>
<input type="text" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">

<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-600">Password</label>

<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out">
</div>
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focusutline-none hover:bg-indigo-600 rounded text-lg">Sign up</button>

</div>
</div>
[/CODE]
Thanks!

 

[abhiweb_admec]

Its quite easy actually all you need to do is use display:flex; CSS property on the parent of both the div elements and it will make them inline there is a lot more properties that are used along with flex to position the div in the ways you want and these can be made responsive as well.
However, if you ever had a need to make a to make responsive website with only CSS use display:grid; property this too has several other properties that work with them.

Learn more about basics of HTML and CSS from here.
Learn more about flex and grid from W3School or Mozilla Docs both are good though Mozilla docs is not for the beginner.