Content of two li tags in row and column are not aligned properly

I am struggling with ensuring that the two columns and two rows of text in my page section are always aligned correctly. Column 1 and the contents of row 1 should be on the same line, but instead, column 2 is appearing a line or two below column 1. This issue seems to occur when the media query for smaller screens activates.

Is there a solution to fix this alignment problem?

HTML Code:

<section class="carousel freedom container"> <!--Freedom section -->

<ul class="two-col left-col">
 <li class="pen"> <span class="icon-text"> <em>Work</em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT</span> </li>
<li class="arrow"> <span class="icon-text"> <em>Access </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXTTEXT TEXT TEXT</span> </li>
</ul>
<ul class="two-col right-col">
<li class="phone"> <span class="icon-text"> <em>Go </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXTTEXT TEXT TEXT</span> </li>
<li class="download"> <span class="icon-text"> <em>Stay </em> TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</li>
</ul>
</section>   <!--End of Freedom carousel -->

Fiddle with css: http://jsfiddle.net/LaL6c4cx/

htmlcss

Answer №1

To ensure proper alignment, apply the vertical-align: top; property to your elements with the classes .left-col and .right-col.

Explore this code live on JSFiddle - DEMO

CSS:

.left-col, .right-col {
    list-style: none;
    width: 47%;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Answer №2

Include a vertical alignment property in the UL class:

.left-col, .right-col {
    list-style: none;
    width: 47%;
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

Check out the example on jsFiddle

Answer №3

If you're looking to structure your layout, consider using the CSS property display: table:

.container 
{
    max-width:1050px;
    margin: 0 auto; 
    display: table;/*Include display table*/
}

.left-col, .right-col {
    list-style: none;
    width: 47%;
    display: table-row;/*Implement display table row*/
    margin: 0;
    padding: 0;
}

.two-col li {
    padding-left: 30px;
    margin-top: 20px;
    display: table-cell;/*Utilize display table cell*/
    padding-bottom: 30px;/*Allow for space between rows*/
}

Check out the fiddle example.

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

How can I create a CSS animation that fades in text blocks when hovering over an image?

I have been trying to implement CSS3 transitions to create a hover effect where the text and background color fade in when hovering over an image. Despite my attempts with various selectors and transition types, I can't seem to achieve the desired res ...

htmlcsscss-transitionsfade

Concealing and revealing the sidebar container

I created a website here and needed to implement a button in the header to hide and show the sidebar. Unfortunately, my current code is not working. Here is what I have attempted: <div id="B"> <button>toggle</button> </div> $ ...

javascriptjqueryhtmlcss

The tab component is failing to load due to an issue with the Bootstrap tab

I've created a page displaying different locations with two tabs - one for Google Maps and another for weather. For example, take a look at this location: The issue I'm facing is that when switching between the tabs, they don't load fully. ...

javascriptjqueryhtmlcsstwitter-bootstrap

Angular problem arises when attempting to map an array and selectively push objects into another array based on a specific condition

Setting up a cashier screen and needing an addToCart function seems pretty simple, right? However, I am encountering a strange logical error. When I click on an item to add it to the cart, my function checks if the item already exists in the array. If it d ...

htmlarraysangulartypescript

What is the best way to choose all the options in a drop-down menu using Selenium Webdriver?

Currently, I am working with Selenium WebDriver and utilizing Java. In my application, there is a dropdown menu named Product containing multiple values (for example: 60). When running the code, I first deselect all options and then select the specific opt ...

javahtmlseleniumselenium-webdriver

Attempting to alter the appearance of my validation control by implementing a custom style sheet theme

After naming a style sheet theme Basic and applying it to my web.config file, I created a Validator class in the css file. Utilizing the cssClass attribute with the Validator type, I successfully adjusted the font-weight property but struggled to change th ...

htmlcssasp.net

User agreement required for HTML5 geolocation custom notifications

Currently implementing HTML5 geolocation on my mobile website. I am exploring the possibility of displaying a custom notification instead of the default web browser notification to request user consent for sharing their location. This custom notification ...

htmlgeolocation

Looking for assistance with CSS styling

I've been attempting to align two custom fields on a checkout form next to each other, but I'm running into an issue where the fields below are overlapping. I've experimented with using clear: both/left/right; to address this problem, but it ...

css

What are the steps to create custom pagination for tables?

Can you help me style a mui component in a similar way? https://i.sstatic.net/fxdvu.png I'm thinking of using the Pagination component and Select, but do you have any other suggestions? ...

cssreactjsmaterial-uifrontend

Saving JSON data as a file on server

Currently, I am running a localhost website on my Raspberry Pi using Apache and I am seeking advice on how to export a JSON string to a file on the Raspberry Pi itself. While I do know how to export a file, I am unsure of how to send it to the Raspberry Pi ...

javascripthtmljsonraspberry-piexport

Inject the content into the DIV tag retrieved from the source

I am working on a website layout that consists of a left panel and a content div on the right. Currently, when a user clicks on a link in the left panel, a JavaScript Ajax call is made to load the corresponding content into the div tag named 'content& ...

javascriptajaxjqueryhtml

What's the best way to align text in relation to the image?

enter image description here I need help with positioning my text relative to the resizing image at different breakpoints. Can anyone assist with this? Is there a way to position text relative to the background in a manner that it always stays attached t ...

htmlcssbootstrap-4

Change CSS style sheets depending on the size of the viewport

I've tried to implement the method from CSS-Tricks that allows for changing stylesheets based on the viewport width using multiple .css files and jQuery. However, my code isn't functioning as expected. I've spent the past hour trying to figu ...

javascriptjqueryhtmlcss

Enhancing a JQuery progress bar with customized text and dynamic background color updates

I am considering implementing the Jquery progress bar to display the user's advancement in a course. Within the progress bar, I aim to exhibit the text Course Progress 70% Additionally, I wish to alter the default grey color of the progress bar Thi ...

jquerycssjquery-ui

What causes the focus to be lost when hovering over the second item in the sub list

Link to Fiddle: https://jsfiddle.net/n3tzbn4o/3/ Snippet of CSS: /* Styling for Menu element */ .menu { position: relative; z-index: 100; height: 40px; width: 100%; } Whenever the cursor hovers over Menu 3 > '2015' > Assesmen ...

htmlcss

The Modal content in HTML and CSS is innovatively designed and stands out from the rest

.modal-body { height:100%; overflow-y: scroll; } <div id="modal" class="modal fade" role="dialog"> <div class="modal-dialog" style="width:80%;height:100%"> <!-- Modal content--> <div class="modal-content" style="wid ...

htmlcssbootstrap-4

Ionic 2 hides the form input area within its input component

I set up a login page, but the input fields are not showing up on the form. Here is my current code: <ion-list> <ion-item> <ion-label fixed>Username</ion-label> <ion-i ...

htmlangularionic2

Creating interactive tabs within the HTML document with AngularJS

Trying to customize the tab layout on my HTML page and I have a code similar to this: <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> ...

javascripthtmlangularjs

What is the best way to retrieve user data and format the output using JavaScript into a structured form?

I am trying to achieve the functionality shown in this image: https://i.sstatic.net/svzvc.png My goal is to extract user input from a form and display it on my webpage using JavaScript. Below is the code snippet that I have been working on. Code: f ...

javascripthtml

Display a caption with a translucent color overlay when the mouse hovers over an image

I have created a code snippet that displays a caption with a semi-transparent red overlay when hovering over an image: HTML: <a href="http://www.domain.com/"> <div class="thumb"> <img src="http://www.domain.com/thumbnail.jpg" w ...

htmlcsshoveropacity