Is there a way to combine a heading with a paragraph in one line?

I've been attempting to display a <p> and an <h4> element side by side within a card.

I have experimented with the following:

.where,
.location {
  display: inline-block;
  color: #acdd1b;
  font-size: 15px;
  font-weight: 150px;
}

.when,
.dates {
  display: inline;
  color: #ddd01b;
  font-size: 15px;
}
<p class="where">Where:</p>
<h4 class="location">Gili Air - Lombok, Indonesia</h4>
<p class="dates">When:</p>
<p class="dates">01-01-'24 - 01-03-'24</p>

This approach did not yield the desired outcome. The elements are still appearing on separate lines, albeit with less spacing due to using inline-block.

I also attempted placing them in a 

<div class="line">
, as suggested in previous posts. Setting the CSS to 
.line {display: flex; align-items: center;}
resulted in success, but the layout looked unattractive as the heading was positioned higher than the paragraph.

Is there a solution to this issue? Perhaps another method besides styling the .line element to manually adjust the position of the heading tag?

htmlcss

Answer №1

If you want to achieve a similar effect, try moving the <span> tag inside the <p> tag and applying CSS styles to the .location class using font-weight: 600;. This will make the text appear bold, similar to how it looks with the <h4> tag.

.location{
  font-size: 15px;
  font-weight: 600;
}
<p class="where"> Where: <span class="location"> Gili Air - Lombok, Indonesia </span> </p>

Answer №2

To add emphasis to certain sections of your text, consider wrapping them in <strong></strong> tags within a <p> tag. Additionally, you have the option to further customize the appearance using CSS to achieve a header-like effect.

Answer №3

To make use of the display: flex; property for alignment, apply it to the container element (and specify the width of your card container).

.container-element {
  display: flex;
  align-items: center;
}

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

Obscured by the overflow

How can I make my navbar stay sticky at the top all the time while scrolling without the content of my cards overlapping it? I am using Bootstrap 5 and have tried setting the position to sticky and overflow to hidden, but the issue persists. Any suggestion ...

htmlcsscss-positionbootstrap-5

The scroller's height is displayed at 100%

I'm experiencing an issue with the scrolling of a division. I've set the overflow to "scroll" for the division, but it's displaying at 100% height. Please refer to the screenshot provided. Can you advise me on which properties I should adjus ...

htmlcss

The button animation will only activate with a particular margin setting

I am encountering a strange issue with my code. The button CSS animation only works when the margin-top is set to 125px for the sim-button class. I want to reduce the margin-top to 25px, but then the animation does not work. Check out the Codepen here Ex ...

htmlcss

Creating websites with Single-page applications by assembling HTML and JS fragments at build-time

As I prepare to tackle a large single-page app project, my main focus is on finding a more efficient way to develop it other than cramming everything into one massive file. My priority is ensuring the maintainability and testability of the app, which is wh ...

javascripthtmlbuildsinglepage

CSS Issue: When nesting divs, text moves to the top of the second page

Currently, I am using the following HTML and inline CSS: <div style="width: 975px; clear: both; float: left; text-align: left; margin: 0; background-color: #D3D3D3;"> <div style="width: 384px; float: left; height: 20px; margin: 0;"> ...

asp.netcss

When clicked, activate a different overlay div

I have an image that I want to enhance with some effects. I was able to add a hover overlay using a div. Now, I am looking to add an onclick event to change to another overlay div. Below is the code I have so far, or you can view the CodePen Here <d ...

javascriptjqueryhtmlcss

CSS button with folded corner illusion and dynamic transitions

I have been using the code provided below to create a folded corner effect on a button, but I am having trouble with the white background that appears in the upper left corner of the button. Is there a class I can use to make this transparent so that the y ...

htmlcss

Is it possible to use a shell script to replace the external CSS file link in an HTML file with the actual content of the CSS file

Seeking a solution for replacing external CSS and JS file links in an HTML document with the actual content of these files. The current structure of the HTML file is as follows: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C ...

javascripthtmlcssawksed

Reading Properties in VueJS with Firebase

<template> <div id="app"> <h1 id="title"gt;{{ quiz.title }}</h1> <div id="ques" v-for="(question, index) in quiz.questions" :key="question.text"> <div v-show="index = ...

javascripthtmlcssfirebasevue.js

The HTML code does not display list items

I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code: ...

htmlcss

Keystrokes may not consistently register in Firefox

I created a compact web application where users can interact by clicking on a button to trigger a modal dialog. Within this dialog, users have the ability to choose from various options. To enhance user experience, I implemented the utilization of the jQue ...

javascriptjqueryhtml

Interacting with server through HTML form submissions (GET and POST methods)

After reading a variety of resources and examples, I still feel like I'm missing a deeper understanding of the fundamental concepts behind server-side functions and their interaction with HTML. Recently, I was able to successfully manipulate an array ...

javascriptjqueryhtmlnode.jsexpress

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

htmlcsscss-grid

Activate animation when a user clicks on a link

Hey there, I'm a bit unsure about how to word this and I'm still getting the hang of StackExchange so I hope I've posted in the correct place. Currently, I am developing a mobile HTML5 app that utilizes Phonegap/Cordova (as well as Bootstra ...

csstwitter-bootstrapanimationcordova

The issue of CSS not being applied to HTML content after being inserted via AJAX has been encountered

I've successfully implemented AJAX to retrieve specific page content from a database, but now I'm facing an issue: When it comes to the 'Contact' page, the form retrieved from the database (as HTML) is not applying the CSS styles I hav ...

phpjavascripthtmlcssajax

Prevent input element from being included in tab order in Internet Explorer

I’m facing an issue in my Single Page Application built with vue.js. I have a checkbox that needs to be invisible for UX reasons, so I set its opacity to zero. However, even with tabindex set to -1, the input element is still included in the tab order ...

htmlvue.jsaccessibility

Is there an issue with Ajax connecting to the database?

I have created an HTML file where I need AJAX to connect to the database in the background and fetch the selected city based on the user's pre-selected country. Essentially, I want the database to load all the cities in the drop-down menu automaticall ...

javascriptphphtmlajax

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Using jQuery, I am adding HTML code to a div. One part of this code involves referencing a div's ID by concatenating a variable from a loop. $(... + '<div class="recommendations filter" id="recCards-'+ i +'">' + &apo ...

javascriptjqueryhtmlcssconcatenation

What is the most effective way to utilize CSS in order to contain a page filled with tall nested elements within the height of the viewport?

How can I restrict a page to the height of the viewport? I want to control the overflow-y on child elements, but it seems like I cannot limit the height--I can only set a max-height in pixels or a percentage. I believe I need to confine the height of certa ...

cssbootstrap-4flexboxviewport-units

Button triggering an onclick event

Can you design a feature where clicking on each button reveals specific images with text and heading? The initial image is hidden and when another button is clicked, the previous image disappears and new one appears in its place. We would like to achieve t ...

htmljquerycss