Can someone help me create two responsive columns with different inputs on the same row?
The first column should display:
The second column should show: How it currently appears:
Here's how I want it to look:
I believe there might be a mistake in my code.
<body>
<div id="menu1">
<div id="menu2">
<h1>
Treatments:
</h1>
<hr>
<div class="treatments">
<div class="options">
<p> Item 1 </p>
<p> Item 1 </p>
<p> Item 1 </p>
<p> Item 1 </p>
<p> Item 1 </p>
<p> Item 1 </p>
<p> Item 1 </p>
<div class="prices">
<p> $NAN </p>
<p> $NAN </p>
<p> $NAN </p>
<p> $NAN </p>
<p> $NAN </p>
<p> $NAN </p>
<p> $NAN </p>
</div>
</div>
</div>
</div>
</div>
CSS:
div#menu1{
position: relative;
max-width: 814px;
/*background:rgba(123,123,123,0.5);*/
background:#ccc;
padding: 15px;
margin: 0 auto;
text-align:center;
border-radius:12px;
/* shadow */
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
/* shadow*/
}
div#menu1
div#menu2{
position: relative;
max-width: 727px;
padding: 36px;
border: 7px solid #000;
border-radius:5px;
}
hr {
border: none;
height: 5px;
background:#000000;
/* width:50%;*/
}
.treatments{
}
.options{
text-align:left; !important
}
.prices{
text-align:right;!important
}