Proper method for positioning text in a line

Question

Proper method for positioning text in a line

Trying to recreate the image below, but facing alignment issues with the text in my code. How can I vertically align the text so that they are aligned like in the photo? Flexbox hasn't helped due to varying text lengths causing misalignment.

const storeItems = [
    {
        name: 'TV',
        price: 800.00,
        inStock: true,
        details: '4K Ultra HD'
    },
    ...
];

storeItems.forEach(function(n, i, a) {
  if (n.inStock == true) {
   $('.boxes').append('<div class="container">' + '<p>$' + n.price +'</p>' + '<p>' + n.name + '</p>' + '<p>' + n.details + '</p>'
   + 
  '</div>');
  }
 if (n.inStock == false) {
  $('.boxes').append('<p class="notInStock">' + n.name + ': $' + 
  n.price + ' Not in stock' + '</p>');
  }
  
})

$('#clickMe').appendTo('.boxes');



$('#clickMe').click(function(){
    $('#contentContainer').toggleClass('darkModeBackground');
    $('.container').toggleClass('darkModeContainers');
    $(this).toggleClass('darkModeClickMe');
})

body {
  font-family: Helvetica;
  background-color: #d3d3d3;
  color: black;
}

.shrink-container {
  width: 800px;
  height: 50px;
  margin: 0 auto;
}
...

<!DOCTYPE html>
<html>
...
</html>

javascript html css containers alignment

Answer 1

Answer №1

Here is a solution that utilizes the <table> element.

const products = [
    {
        name: 'TV',
        price: 800.00,
        inStock: true,
        details: '4K Ultra HD'
    },
    {
        name: 'Phone',
        price: 700.00,
        inStock: false,
        details: '5G'
    },
    // Additional product data here
];

products.forEach(function(product) {
  $('#productTable').append('<tr><td>$' + product.price +'</td><td>' + product.name + '</td><td>' + product.details + '</td></tr>');
})

$('#darkModeToggle').click(function(){
    $('body').toggleClass('darkModeTheme');
    $('#productTable').toggleClass('darkModeTable');
    $(this).toggleClass('darkModeButton');
})

body {
  font-family: Helvetica;
  background-color: #d3d3d3;
  color: black;
}

#productTable {
  border-spacing: 0 .5em;
}

.darkModeTable tr {
  background-color: #333333;
  color: white;
}
// Additional CSS styles for dark mode and button

#darkModeToggle button {
  padding: 10px;
  font-family: Helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h1>Products</h1>
  <table id="productTable"></table>
  <div id="darkModeToggle"><button>Toggle Dark Mode</button></div>
</body>

Answer 2

Here is a solution that utilizes the <table> element.

const products = [
    {
        name: 'TV',
        price: 800.00,
        inStock: true,
        details: '4K Ultra HD'
    },
    {
        name: 'Phone',
        price: 700.00,
        inStock: false,
        details: '5G'
    },
    // Additional product data here
];

products.forEach(function(product) {
  $('#productTable').append('<tr><td>$' + product.price +'</td><td>' + product.name + '</td><td>' + product.details + '</td></tr>');
})

$('#darkModeToggle').click(function(){
    $('body').toggleClass('darkModeTheme');
    $('#productTable').toggleClass('darkModeTable');
    $(this).toggleClass('darkModeButton');
})

body {
  font-family: Helvetica;
  background-color: #d3d3d3;
  color: black;
}

#productTable {
  border-spacing: 0 .5em;
}

.darkModeTable tr {
  background-color: #333333;
  color: white;
}
// Additional CSS styles for dark mode and button

#darkModeToggle button {
  padding: 10px;
  font-family: Helvetica;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <h1>Products</h1>
  <table id="productTable"></table>
  <div id="darkModeToggle"><button>Toggle Dark Mode</button></div>
</body>

Proper method for positioning text in a line

Answer №1

Similar questions

How to dynamically adjust font size using Javascript

Modify the td attributes while retaining the extracted data values from the website

elevate design css/widget/components

The post request is successful in Postman and cURL, however, it faces issues when executed in Angular

Excellent Methods for Implementing a Double Click Functionality in JavaScript for Mouse

How to customize the active color of the navigation pills in Bootstrap 4

Oops! Vue.js router configuration is throwing an error because it's unable to read properties of undefined when trying to access 'use'

Guide to storing data in the browser's local storage with a Node.js Express backend

Execute command problem

Having trouble accessing the downloaded file from S3 using Angular and NodeJS

Is there a way to deactivate the spin buttons for an input number field?

Achieve the effect of "background-attachment: fixed" using a div element

How to manipulate iframe elements using jQuery or JavaScript

Establishing a primary data format for a backbone collection

Creating a CSS class dynamically with AngularJS: A step-by-step guide

Prevent unchecking a checked list item by clicking on it

Regex pattern is malfunctioning

Using Selenium Webdriver to target and trigger an onclick event through a CSS selector on a flight booking

Safari Browser does not currently offer support for MediaRecorder functionality

The appearance of the circle in Safari is rough and lacks smoothness