Design a two-column structure with right-aligned labels and left-aligned values using CSS

Question

Design a two-column structure with right-aligned labels and left-aligned values using CSS

Hello everyone,

I am seeking the most straightforward method to achieve a basic layout using HTML and CSS that resembles the image in this link: https://i.sstatic.net/e6kuB.png

To be more specific, I need a label aligned to the right on the left side, and a value aligned to the left on the right side. It is important not to set a fixed width for the left column as it should adjust based on the longest label.

The solution should maintain semantic structure, work well with screen readers (reading label followed by value), and avoid excessive use of extra <div> elements.

This type of layout is quite common, so there must be a very simple way to achieve it. However, I have yet to discover it myself.

While a <table> could handle this layout effectively, I understand the recommendation to avoid using tables for purely visual purposes when the data is not tabular.

Thank you in advance!

html css

Answer 1

Answer №1

There are a few options available with minimal HTML, one utilizing CSS Grid and the other using CSS flex-box layout.

CSS Grid:

/* Simple reset to reset margin, padding,
   and box-sizing: */
*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Setting the form element's layout to use
   grid layout: */
form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em 1em;
  width: 80vw;
  margin: 0 auto;
}

label {
  text-align: right;
}

label::after {
  content: ':'
}

<form>
  <label for="input1">label</label>
  <input type="text" id="input1" placeholder="input 1">
  <label for="input2">A longer label</label>
  <input type="text" id="input2" placeholder="input 2">
  <label for="input3">Another slightly longer label</label>
  <input type="text" id="input3" placeholder="input 3">
  <label for="input4">A label that goes on, frankly, for quite a bit further than might be common for the average &lt;label&gt; element</label>
  <input type="text" id="input4" placeholder="input 4">
</form>

JS Fiddle demo.

Flexbox:

/* Simple reset to ensure uniform styling: */
*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set form layout to flexbox: */
form {
  display: flex;
  flex-wrap: wrap;
  width: 80vw;
  margin: 0 auto;
}

label,
input {
  flex: 1 1 50%;
  margin: 0.5em 0;
}

label {
  text-align: right;
  margin-right: 1em;
}

label::after {
  content: ':'
}

<form>
  <label for="input1">label</label>
  <input type="text" id="input1" placeholder="input 1">
  <label for="input2">A longer label</label>
  <input type="text" id="input2" placeholder="input 2">
  <label for="input3">Another slightly longer label</label>
  <input type="text" id="input3" placeholder="input 3">
  <label for="input4">A label that goes on, frankly, for quite a bit further than might be common for the average &lt;label&gt; element</label>
  <input type="text" id="input4" placeholder="input 4">
</form>

JS Fiddle demo.

Answer 2

There are a few options available with minimal HTML, one utilizing CSS Grid and the other using CSS flex-box layout.

CSS Grid:

/* Simple reset to reset margin, padding,
   and box-sizing: */
*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Setting the form element's layout to use
   grid layout: */
form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5em 1em;
  width: 80vw;
  margin: 0 auto;
}

label {
  text-align: right;
}

label::after {
  content: ':'
}

<form>
  <label for="input1">label</label>
  <input type="text" id="input1" placeholder="input 1">
  <label for="input2">A longer label</label>
  <input type="text" id="input2" placeholder="input 2">
  <label for="input3">Another slightly longer label</label>
  <input type="text" id="input3" placeholder="input 3">
  <label for="input4">A label that goes on, frankly, for quite a bit further than might be common for the average &lt;label&gt; element</label>
  <input type="text" id="input4" placeholder="input 4">
</form>

JS Fiddle demo.

Flexbox:

/* Simple reset to ensure uniform styling: */
*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set form layout to flexbox: */
form {
  display: flex;
  flex-wrap: wrap;
  width: 80vw;
  margin: 0 auto;
}

label,
input {
  flex: 1 1 50%;
  margin: 0.5em 0;
}

label {
  text-align: right;
  margin-right: 1em;
}

label::after {
  content: ':'
}

<form>
  <label for="input1">label</label>
  <input type="text" id="input1" placeholder="input 1">
  <label for="input2">A longer label</label>
  <input type="text" id="input2" placeholder="input 2">
  <label for="input3">Another slightly longer label</label>
  <input type="text" id="input3" placeholder="input 3">
  <label for="input4">A label that goes on, frankly, for quite a bit further than might be common for the average &lt;label&gt; element</label>
  <input type="text" id="input4" placeholder="input 4">
</form>

JS Fiddle demo.

Answer 3

Answer №2

CSS can come to the rescue with tables: https://css-tricks.com/almanac/properties/d/display/

While these may not be traditional tables, they can still emulate table behavior.

.notATable {
  display:table;
  list-style:none;
  padding-left:0;
}

.notATable > li 
 {
  display:table-row;
 }
 
 .notATable > li > *
 {
  display:table-cell;
  padding:5px;
 }
 
 
 .notATable label {
  font-weight:bold;
  text-align:right;
 }
 
 .notATable label:after {
  content: ':';
 }

<ul class="notATable">
   <li><label>Label</label><div>Value</div></li>
   <li><label>Another Label</label><div>Some Value</div></li>
   <li><label>A longer Label</label><div>Another Value</div></li>
   <li><label>Short Label</label><div>A different Value</div></li>
   <li><label>Really, Really Long Label</label><div>Last Value</div></li>
</ul>

You now have the flexibility to use CSS to adjust the layout of your content, such as using media-queries to present labels and values differently on mobile devices.

Answer 4

CSS can come to the rescue with tables: https://css-tricks.com/almanac/properties/d/display/

While these may not be traditional tables, they can still emulate table behavior.

.notATable {
  display:table;
  list-style:none;
  padding-left:0;
}

.notATable > li 
 {
  display:table-row;
 }
 
 .notATable > li > *
 {
  display:table-cell;
  padding:5px;
 }
 
 
 .notATable label {
  font-weight:bold;
  text-align:right;
 }
 
 .notATable label:after {
  content: ':';
 }

<ul class="notATable">
   <li><label>Label</label><div>Value</div></li>
   <li><label>Another Label</label><div>Some Value</div></li>
   <li><label>A longer Label</label><div>Another Value</div></li>
   <li><label>Short Label</label><div>A different Value</div></li>
   <li><label>Really, Really Long Label</label><div>Last Value</div></li>
</ul>

You now have the flexibility to use CSS to adjust the layout of your content, such as using media-queries to present labels and values differently on mobile devices.

Answer 5

Answer №3

Is this straightforward?

*{
  padding: 5px;
  margin: 0;
  font-family: verdana;
}

.d-table {
  display:table;
}

.m-auto{
  margin:auto  
}

.d-flex{
    display:flex;
}    
.d-flex > div{
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

label{
  display:block;
  text-align:right;
  font-weight: bold;
  margin-right: 5px;
}

<div class="d-table m-auto">
  <div class="d-flex">
    <div>
      <label>Label:</label>
      <label>Another label:</label>
      <label>A long label:</label>
      <label>Short label:</label>
      <label>Really, really long label:</label>
    </div>
    <div>
      <p>Value</p>
      <p>Some value</p>
      <p>Another value</p>
      <p>A different value</p>
      <p>Last value</p>
    </div>
  </div>
</div>

Answer 6

Is this straightforward?

*{
  padding: 5px;
  margin: 0;
  font-family: verdana;
}

.d-table {
  display:table;
}

.m-auto{
  margin:auto  
}

.d-flex{
    display:flex;
}    
.d-flex > div{
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

label{
  display:block;
  text-align:right;
  font-weight: bold;
  margin-right: 5px;
}

<div class="d-table m-auto">
  <div class="d-flex">
    <div>
      <label>Label:</label>
      <label>Another label:</label>
      <label>A long label:</label>
      <label>Short label:</label>
      <label>Really, really long label:</label>
    </div>
    <div>
      <p>Value</p>
      <p>Some value</p>
      <p>Another value</p>
      <p>A different value</p>
      <p>Last value</p>
    </div>
  </div>
</div>

Design a two-column structure with right-aligned labels and left-aligned values using CSS

Answer №1

CSS Grid:

Flexbox:

Answer №2

Answer №3

Similar questions

Changing text content of an element with dynamic formatting

Order of execution in Single Page Applications when using multiple files: understanding the Javascript async defer concept

Guide to incorporating JSON data into HTML through JavaScript

Creating fixed and scrollable columns using either Flexbox or Bootstrap

Retaining specific items in a collapsed Bootstrap Navbar

Using table-responsive causes a modal to break inside because of overflow-scrolling touch in the CSS

Grab cell information from a dynamic table using Ruby and Selenium

The jquery and css3 slider smoothly slides in one direction, but struggles to move in the opposite

Designing a space for textual content using HTML coding

"Enhancing Your Web Pages: Generating and Inserting HTML Elements on the Fly Using

What are the standard stacking order rules for elements in HTML?

Customize MUI Tabs to resemble the design of Bootstrap Nav Tabs

Designing a versatile DIV that sorts through components with the power of HTML, CSS, and JavaScript

Enhancing the security of login procedures

Switching the background image of a div by clicking on a different div

Creating an eye-catching display with Bootstrap 4: Achieving a row of cards with varying heights

Creating a Background Cutout Effect with CSS Using Elements instead of Images

Angular 2's Component background color styling

Cover the whole page in darkness and emphasize the division element

What causes Safari to display a black border around resized videos?