Creating a dynamic layout using multiple columns in CSS with varying inputs

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
         }

Answer №1

Ensure that your HTML code is easily comprehensible and legible even without any styling. Remember to pair the name with the price :)

Here's an example using a list:

ul {
  border:solid 10px;
  padding:0.25em;
  width:400px;
  line-height:1.6em;
  font-size:2em;
  font-weight:bold;
  border-radius:0.5em;
}
li {
  display:block;
  }
li em {
  float:left;
  width:50%;
  }
<ul>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
  <li><em>Name:</em> Price:</li>
 </ul>

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

Tips for removing CSS and Javascript code from a website's source code

After implementing the Slicknav Menu plugin on my website, I noticed that a portion of the plugin's CSS and script code is visible when inspecting the source code of the main page: <head> ... <style id='slicknavcss-inline-css&apo ...

Is it deemed as an anti-pattern to establish directives for styling?

Currently, I am in the midst of developing a specialized component UI library for a specific project I'm involved in. This library will consist of unique stylized components with elements that are reused throughout. As I work on this project, I find ...

execute action once element has finished loading - angular

I am looking for a way to trigger an angular function after a specific element has been displayed on the page. The challenge arises because this element is part of a Single Page Application (SPA) where its display is controlled by a series of events. Tradi ...

Tips for keeping the DropDown Menu displayed even after moving the cursor away from the targeted element in Material-UI

import React from 'react'; import { makeStyles, Typography, Grid } from '@material-ui/core'; const styles = makeStyles((theme) => ({ root: {}, textStyle: { fontFamily: 'brandon-grotesque-black', tex ...

Can someone guide me on how to retrieve data from a MUI table within a React project

Currently, I am retrieving data from a server in JSON format and looping through this data to display specific information. Everything is functioning as expected, but I'm encountering an issue with a Popover element that contains items with onclick ev ...

Performing height calculations in JavaScript is necessary to recalculate them whenever there is a

A JavaScript function is used to calculate the height of an iframe element and the document height, then determine if the iframe is on or off based on its height and display properties. The issue arises when changing pages— if the height is less than the ...

Using GWT to save text or upload a file

On my website that I'm developing, I want to provide users with the ability to upload a file or input text into a textbox, which will then be saved into a file. To achieve something similar in HTML, consider the following code: <form action="Uploa ...

Can a custom structural directive be utilized under certain circumstances within Angular?

Presently, I am working with a unique custom structural directive that looks like this: <div *someDirective>. This specific directive displays a div only when certain conditions are met. However, I am faced with the challenge of implementing condit ...

Pretending to determine the exact height of the body

I am facing a challenge with my JavaScript application that is loaded within an iframe through a Liferay portlet. The HTML container is currently empty and the JS is loaded only when the document is fully loaded. Upon loading the page in the iframe, Lifer ...

Assign specific classes to the rows and overall table by extracting information from the first row and first column of the table

My goal is to utilize jQuery in order to dynamically assign classes to the rows and columns of a table based on the classes of the first row and column. For instance: The current HTML code I have is as follows: <table class="numAlpha" border="1"> ...

Display a layer or a div with clickable links on top of an image when it is

We are attempting to recreate a feature similar to the one found on IBM - specifically the image box (Lets build a smarter planet box) that reveals a layer with links when hovered over. Any assistance or references would be greatly valued. Thank you! K ...

Generating a clickable link from information pulled from a database and utilizing the get() method

Currently experimenting with a form I created and everything is functioning smoothly. My current objective involves retrieving specific rows from my database and presenting them as a summary on a separate page. However, I want these rows to appear as hyper ...

Concealing items in a loop using Javascript

I need assistance with this issue. I am trying to hide text by clicking on a link, but it doesn't seem to be working correctly. Even though I tried the following code, I can't figure out why it's not functioning as expected. Is there a diff ...

Image remains fluid within a static div without resizing

Any assistance would be greatly appreciated. I am currently facing an issue with a fixed div that is floating at the bottom of the screen, serving as ad space for the mobile version of a website. The problem arises when attempting to resize the browser win ...

Enlarge the icon so that it is bigger than the text, but ensure that both the icon and

Can someone please help me figure out how to align the icon with the text on this button? https://i.sstatic.net/Jtc3E.png Here is the current code I have: .btn { -webkit-border-radius: 4; -moz-border-radius: 4; border-radius: 4px; font-family: & ...

Adjusting the iframe for a side navigation with multiple dropdown options

I have a file called index.html that contains two dropdown containers and an iframe. The first dropdown container works with the iframe, but the second one does not. Can anyone help me fix this issue? I am having trouble understanding the script for chang ...

Guidelines for determining a screen's location using Javascript

I have integrated a label onto an image and I am trying to figure out how to determine the exact position of each label on the screen. Is there a way to retrieve the screen coordinates for each label? Below is the code snippet that I have uploaded, perha ...

Radio buttons in 'Block Style' functioning perfectly on all devices except for iPad

I am facing an issue with a group of radio buttons that I have styled to display as block elements, making them look like buttons while hiding the actual radio button itself. This setup works perfectly on Chrome and Firefox on desktops and Android tablets, ...

Tips for aligning input vertically across rows with bootstrap 5

I'm currently working on a form layout where each row contains a different number of columns, with labels and inputs in each column. However, I'm facing an issue where the start of the input is not aligned vertically for each row. I tried using ...

The form submits automatically upon loading the page with empty input fields

I recently created a form on my website located at . Initially, the form functioned correctly and the PHP script executed as expected. However, I am now encountering an issue where every time I load the page, a popup message appears indicating that the for ...