What is the best way to combine two grid cells in a column grid within rows using tailwindcss v3?

I am looking to implement a grid layout using tailwindcss v3. Below is the HTML markup:

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid-rows grid grid-cols-1 gap-2 md:grid-cols-2">
  <div class="order-1 w-full bg-blue-500 text-center"><b>1</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...
  <div class="order-3 w-full bg-blue-500 text-center md:order-2 md:row-span-1"><b>2</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took...
  <div class="order-4 w-full bg-blue-500 text-center md:order-3"><b>3</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industr...
  <div class="order-2 w-full bg-blue-500 text-center md:order-4"><b>4</b>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has b...</div>
</div>

Wondering how I can position the 3rd div (highlighted in bold) to start from the end of the 1st div rather than on the second row.

htmlcsstailwind-csscss-grid

Answer №1

In the event that we have the md: variant active, experiment with rearranging the order of the second and third <div>:

<script src="https://cdn.tailwindcss.com"></script>
<div class="grid-rows grid grid-cols-1 gap-2 md:grid-cols-2">
  <div class="order-1 w-full bg-blue-500 text-center"><b>1</b>Lorem Ipsum is simply dummy text .....

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

showing text from chosen selection with an additional element included in the output

I could use some assistance with this code snippet. My goal is to showcase the options in the format: "Fried Rice = 10.000" as the outcome. However, the issue I am facing is that the select option box also contains the price. What I actually need is for th ...

javascripthtmljquery

Is it possible to create editable Word documents programmatically in ASP.NET?

The goal is to create proposal documents that can be easily modified in Word before sending them to customers. Most of the proposal content will come from existing HTML website material (CMS) and some custom content for specific situations. Conditional lo ...

asp.nethtmlms-word

HTML elements within the parent are seemingly enlarged compared to the parent element

I'm currently working on a project for an angular 2 recipe application, and I've encountered an issue with one of my HTML elements. The list items within the unordered list (which contain checkboxes) appear to be larger than the parent UL element ...

csshtml

Is there a way to stop my div from overflowing when I dynamically add an svg to it?

I have a grid that looks similar to the image provided https://i.sstatic.net/mvAYp.png Everything up to this point is working fine. Using d3.js, I am dynamically adding an svg, but I want to position it inside .container2 within #mysvg (I have outlined th ...

csscss-grid

What is the best way to retrieve the name of all input tags, obtain their respective IDs, and append additional text to each

Is there a way to extract all input tag names, retrieve their corresponding ids, and then append text to each input tag? Consider the following inputs: var inputs, index; inputs = document.getElementsByTagName('input'); for (index = 0; index ...

javascriptjqueryhtml

Retrieving Text following an HTML Element with a Parsing Tool

I'm currently utilizing PHP Simple HTML DOM for the development of a web scraper application. Here is the HTML structure from which we need to extract the City/State name, such as "Daviston, AL" in the example below. Can anyone assist me wi ...

phphtmlsimple-html-dom

Leverage the power of the General Sibling Selector to easily traverse through deeply nested elements in your

Hi there, I have a query regarding the General Sibling Selector. Let's start by looking at the HTML: <div id="layout-middle"> <div id="Center"> <a class="col Picture1">Title1</a> <a class="col Picture2">Title2< ...

htmlcss

How can I convert a button to a link within an HTML table?

I have a question regarding buttons in my HTML table. Is it possible that upon clicking a button, the link button changes to "Un-Extend," and then switching back to the previous button when clicked again? How can I achieve this functionality? https://i.sst ...

javascriptjqueryhtml

Ensure that PHP does not automatically add a closing tag

After appending the following string to an array in PHP and displaying it, $spineArray[$i]="<itemref idref='part-$i' linear='yes'/>"; The output displays with an unexpected closing tag. What is causing this automatic addition of ...

phphtml

It displays the PHP code as a comment rather than executing it

I am encountering an issue with my PHP code. Instead of processing the code, it is treating it as a comment. Interestingly, when I used ?php instead of ?, the website doesn't even recognize the code as a comment. What could be causing this issue? < ...

phphtmlcss

Is there a quicker alternative to jQuery's .load() method?

My JSP index page features a navigation header and notifications panel, with other JSP pages being loaded into a specified div using JQuery.load(). This method was utilized to prevent the duplication of navigation and notifications across all pages. Wou ...

jqueryhtmlajaxjspweb-applications

Addressing the space discrepancy between the div element and the footer segment

I'm facing some issues with the layout of my DIVs. There seems to be a large gap between my divs and the footer in this example. How can I make the divs line up right underneath the footer? Another problem is that box 2,3,4 don't seem to have a ...

csshtml

Customize the height of individual carousel items in Primeng carousel

Hey there, I'm currently using the primeng carousel component and running into an issue where the carousel height is always based on the tallest item. I am looking to have an automatic height for each individual carousel item instead. Do you think th ...

htmlangularprimeng

What steps should I take to implement two-way binding for a contenteditable element using ng-bind-html in AngularJS?

I'm still learning Angularjs and came across the code snippet below in the documentation. I am curious how I can modify this to utilize ng-bind-html instead of ng-model. Will there be a conflict if I use both ng-bind-html and ng-model simultaneously? ...

javascripthtmlangularjsbindingtwo-way

Creating dynamic button classes in HTML using Django loop

Is there a way to make buttons automatically turn green when a student is available, but change to red once they have been added to the classList? {% for student in studentList %} <tr> <td>{{ student.firstname }}</td> <td> ...

htmldjango

issue with border color staying the same when focusing

I've been struggling with changing the border on focus in my code. Despite trying various methods, nothing seems to be working. Can someone help me figure out what I'm doing wrong? <input type="text" spellcheck="false" data-placement="top" id ...

htmlcss

The 3D card flipping animation is dragging on for an eternity

I'm experiencing a delay in triggering my 3D Card Flip animation on click, and I can't figure out why it's happening. If you want to see an example, please scroll down and click on any black and white picture here: Here is the code I' ...

jqueryhtmlcsscss-animations

Adjust the appearance of the Algolia React Instant Search feature

Exploring the capabilities of the React Instant Search library has been a fun journey for me so far. The functionality is working as expected, but now I am eager to customize the styling of the components. In my experimentation, I have disabled the link t ...

cssreactjsinstantsearch.js

What causes the vertical inconsistency in ul li elements?

Can someone help me troubleshoot this HTML5 snippet? The LI elements are not aligning properly and I can't figure out why Item 1 is lower than Item 2. I need them to line up on the same level. Any suggestions would be greatly appreciated. <!DOCT ...

htmlcss

Filtering d3 SVG based on JSON attribute using a dropdown menu

My data consists of nodes and links for a force directed graph, where nodes can have one, two, or three connections: {"nodes": [{"id": "Michael Scott", "numOfLinks": 1} ,{"id": "Jim Halpert", "numOfLinks": 1} ,{"id": "Pam Beasley", "nu ...

javascripthtmljsond3.jssvg