Make textbox be on both sides - html

Question

I want to have something like this
instead I
My html code is this
`
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<span class="close">×</span>
<article class="goright">
<input type="name" name="Name" placeholder="" style="width: 140px"><br>
<input type="lastname" name="lastname" placeholder="" style="width: 140px"><br>
<input type="Place" name="Place" placeholder="" style="width: 140px"><br>
</article>
<aside id="sidebar">
<textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>
</aside>
</form>
</div>
</div>
</div>
And this is my CSS
.modal {
display: none;
position: relative;
z-index: 1;
padding-top: 100px;
left: 0;
top: -300px;
float: right;
width: 40%;
height: 40%;
overflow: auto;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin:auto;
padding: 0;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
overflow: hidden;
}
article#goright
{
float: right;
}
aside#sidebar
{
float: left;
}
aside#sidebar .quote input, aside#sidebar .quote textarea
{
width: 90%;
padding: 5px;
}
so I tried to look up this thing here but I could not find an answer that works for me, I tried a lot of variations but nothing really works and I can not get the result, I only managed to get one side that is floated right and aside bar that is left but aside is under previous bar.
So, can you give me a hint or code that can help me achieve the desired result ?

Answer 1

You don't need to use <aside> and other CSS tweaks to achieve the structure.
Just move the <textarea> above the <input> tags and add a float:left class and float:right class to them respectively.
The width of the form is inherited from the .modal class.
Also <input> tags type attribute used are invalid. Supporting type attributes are as mentioned in: https://www.w3schools.com/tags/att_input_type.asp
Also <textarea> does not have a type attribute by default.
.modal {
width: 40%;
height: 40%;
overflow: auto;
}
.align-right {
float: right;
}
.align-left {
float: left;
}
.modal-content {
background-color: #fefefe;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
}
input {
margin-bottom: 5px;
}
<div id="myModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<textarea name="Name" placeholder="Textarea" style="height: 80px" class="align-left"></textarea>
<input type="text" name="Name" placeholder="Input A" style="width: 140px" class="align-right" />
<input type="text" name="lastname" placeholder="Input B" style="width: 140px" class="align-right" />
<input type="text" name="Place" placeholder="Input C" style="width: 140px" class="align-right" />
</form>
</div>
</div>
</div>

Answer 2

Here's an example of what you're trying to achieve -
.wrapper {
max-width: 500px;
}
.textarea-wrapper,
.input-wrapper {
float: left;
width: calc(50% - 10px);
}
.textarea-wrapper {
margin-right: 20px;
}
.textarea {
width: 100%;
height: 90px;
}
.input {
margin-bottom: 16px;
}
<div class="wrapper">
<div class="textarea-wrapper">
<textarea class="textarea"></textarea>
</div>
<div class="input-wrapper">
<input type="text" class="input" placeholder="Text 1">
<input type="text" class="input" placeholder="Text 2">
<input type="text" class="input" placeholder="Text 2">
</div>
</div>
Here's a link.
https://codepen.io/aphextwix/pen/MmZxjR

Answer 3

Take a look at this fiddle: https://jsfiddle.net/5xw7ssa4/
But you have some mistakes in your css:
Height should not be in %.
Both container must float to right.
Do not forget to clear:both after last floating element.
article#goright must be article.goright
In your html you have type="name" for example. It must be type="text".

Answer 4

Hi there you should review both your html markup and css as well bellow are my suggestions
css
.modal {
position: relative;
z-index: 1;
padding-top: inherit;
width: 50%;
height: 123px;
margin: 0 auto;
margin-top: 20px;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin:auto;
padding: 0;
border: 1px solid #888;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4;
}
form {
width: 100%;
padding: 10px 0px;
}
.close{
position: absolute;
right: 0;
color: #fff;
background: #000;
padding: 5px;
z-index: 3;
}
/*a classis identified by a "." an id is identified by an "#" so article#goright is wrong you should have wrote article.goright*/
article.goright {
float: left;
width: 50%;
}
aside#sidebar {
float: left;
width: 50%;
}
/* .quote is the form class aside is inside the form so instead of aside#sidebar .quote textarea you should write .quote aside#sidebar textarea */
.quote aside#sidebar input, .quote aside#sidebar textarea
{
width: 90%;
padding: 5px;
}
article.goright input {
width: 80%;
margin-bottom: 5px;
height: 20px;
}
/*very important to solve the issue*/
.clear{
width: 100%;
height: 0;
clear: both;
float: none;
}
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Testing Page</title>
</head>
<body style="width:100%; margin: 0 auto; padding: 0; text-align: center;">
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<form class="quote" action="javascript:void(0);">
<span class="close">×</span>
<aside id="sidebar">
<textarea type="name" name="Name" placeholder="" style="height: 80px"></textarea> <br>
</aside>
<article class="goright">
<input type="name" name="Name" placeholder=""><br>
<input type="lastname" name="lastname" placeholder=""><br>
<input type="Place" name="Place" placeholder=""><br>
</article>
<!-- this is the div you need to have myModal div cover the div inside it since they are floating left -->
<div class="clear"></div>
</form>
</div>
</div>
</div>
</body>
</html>