Combining the elements p and div on a single line

I've designed a card layout with 3 rows containing a paragraph and a div element each. I want both elements in each row to be displayed on the same line. How can I achieve this?

Sample HTML:

<div class="user_card">
    <div class="skills">
        <p>Skills</p>
        <div class="progress_wrap">
            <div class="progress" style="width:95%"></div>
        </div>
    </div>
    <div class="commitment">
        <p>Commitment</p>
        <div class="progress_wrap">
            <div class="progress" style="width:35%;"></div>
        </div>
    </div>
    <div class="reputation">
        <p>Reputation</p>
        <div class="progress_wrap">
            <div class="progress" style="width:65%;"></div>
        </div>
    </div>
</div>

Cascading Style Sheets (CSS):

.user_card {
    background-color: #eee;
    width: 30%;
    padding: 10px;
}
.user_card div p {
    display: inline;
}
.user_card div.skills {
    margin-left: -1px;
}
.user_card div div.progress_wrap {
    background-color: white;
    width: 100%;
    border: 1px solid #bbb;
}
.user_card div div.progress {
    height: 30px;
    background-color: #ddd;
}

Check out the Fiddle link for visualization.

Please provide your feedback and share your solution using the provided fiddle!

htmlcss

Answer №1

Utilizing the display table, table-row, and table-cell properties.

View the code here

.user_card {
    background-color: #eee;
    width: 30%;
    padding: 10px;
    display:table;
}

.user_card p {
    display: table-cell;
    vertical-align:top;
    line-height:30px;
    padding:2px 10px 2px 2px;
}
.user_card div {
    display:table-row;
    padding:2px;
}
.user_card div div {
    display:table-cell;
}
.user_card div div.progress_wrap {
    background-color: white;
    width: 100%;
    border: 1px solid #bbb;
}
.user_card div div.progress {
    height: 30px;
    background-color: #ddd;
}

Answer №2

If you're looking to organize information neatly, consider using tables: http://jsbin.com/efugop

Here is an example of how it can be implemented:

HTML:

    <div class="user_info">
    <div class="details">
      <table><tr><td>
        <p>Details</p></td><td>
        <div class="info_wrap" style="margin-left:70px;">
            <div class="information" style="width:95%"></div>
        </div></td></tr></table></div>
     <div class="status">
      <table><tr><td>
        <p style="position:relative;margin-top:6px;">Status</p>
        <div class="progress_status" style="position:relative;left:35px;margin-left:70px;">
            <div class="progress" style="width:35%;"></div>
        </div></td></tr></table>
    </div>
    <div class="rating">
      <table><tr><td>
        <p style="position:relative;margin-top:6px;">Rating</p>
        <div class="progress_rating" style="position:relative;left:35px;margin-left:70px;">
            <div class="progress" style="width:65%;"></div>
        </div>
        </td></tr></table>
    </div>
</div>

CSS:

     .user_info {
    background-color: #eee;
    width: 50%;
    padding: 20px 80px 20px 20px;
}
.user_info div p {
    display: inline;
    float: left;
}
.user_info div.details {
    margin-left: -1px;
}
.user_info div div.info_wrap {
    background-color: white;
    width: 100px;
    border: 1px solid #bbb;
}
.user_info div div.progress {
    height: 30px;
    background-color: #ddd;
}

Answer №3

Utilize CSS to align elements on the left side

.floating_element {
  float: left;
}

Answer №4

HTML 

<div class="user_card">
<div class="skills">
    <p>Skills</p>
    <div class="progress_wrap" style="margin-left:80px;">
        <div class="progress" style="width:95%"></div>
    </div>
</div>
<div class="commitment">
    <p  style="margin-left:-35px;">Commitment</p>
    <div class="progress_wrap" style="margin-left:80px;">
        <div class="progress" style="width:35%;"></div>
    </div>
</div>
<div class="reputation">
    <p style="margin-left:-73px;">Reputation</p>
    <div class="progress_wrap" style="margin-left:80px;">
        <div class="progress" style="width:65%;"></div>
    </div>
</div>

In CSS

.user_card {
    background-color: #eee;
    width: 50%;
    padding: 20px 100px 20px 20px;

}

.user_card div p {
    display: inline;
    float: left;
}
.user_card div.skills {
    margin-left: -1px;
}
.user_card div div.progress_wrap {
    background-color: white;
    width: 100%;
    border: 1px solid #bbb;
}
.user_card div div.progress {
    height: 30px;
    background-color: #ddd;
}

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

AngularJS HTTP POST request encountering issue with success function not functioning as expected

I am currently working on implementing a basic HTTP post request to insert data into my database. The following pages are involved: register.php contains the registration form. maincons.js houses the application controllers. sqlregister.php include ...

javascriptphphtmlangularjs

Issue with cancelling a file upload is not functioning properly on Internet Explorer

My experience with file uploads in Internet Explorer is causing some issues. While other browsers work smoothly when canceling file uploads, Internet Explorer seems to have a different behavior. In other browsers, clicking the "Cancel" button during a fil ...

phpjqueryhtml

Tips on obtaining a standalone text node using Selenium WebDriver

Is there a way to extract the text from a tag while excluding the text from nested tags? For example, if we only want to retrieve the string 183591 from within the <small> tag and not the text Service Request ID: from the <span> tag. The challe ...

htmlseleniumxpathselenium-webdriverwebdriver

How to Round Decimals in DataTables

I am encountering an issue with my data table's footer, which is supposed to display the sum of each column. However, while the values within the table are rounded to two decimal places, the values in the footer do not always adhere to this formatting ...

javascripthtmldatatable

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

Incorporating the Results of a Script into TinyMCE with the Help of

Recently, I developed a script for creating a basic table layout structure. To enhance its functionality, I decided to integrate AJAX with jQuery in order to input the output of the script into a TinyMCE textarea. The PHP script itself works seamlessly whe ...

phpjqueryhtmlajaxtinymce

What could be causing the issue of dynamic meta open graph tags not functioning properly?

For my current project, I am utilizing Strapi as the CMS and Next.js. My task is to generate meta open graph tags dynamically. However, after deployment, when I attempt to share my website link on social media platforms such as Facebook or WhatsApp, the ti ...

htmlnext.jsmeta-tags

Revamping Existing Styles: Making a Statement with `:after`

In my asp.net mvc application, I am facing an issue where the * symbol, representing a required field, and the ? symbol, representing help, are not both being displayed. The ? symbol seems to be overriding the * symbol, resulting in only one symbol being s ...

cssasp.netasp.net-mvcstylesheet

Chrome's Surprising Cross-Domain File URL Problem

Is anyone else experiencing the issue with Chrome throwing a Cross Domain Error when using file URLs? I'm trying to embed an SVG document into an HTML page using the object tag with a relative path in the data attribute. Upon the onload event, I need ...

htmlsvgcross-domainembed

Trigger an event in jQuery when the focus moves away from a set of controls

Within a div, I have three textboxes and am looking for a way to trigger an event when focus leaves one of these inputs without transitioning to another one of the three. If the user is editing any of the three controls, the event should not be triggered. ...

javascriptjqueryhtmljquery-focusout

Elevating the Sidebar: Transforming Bootstrap 4 Sidebar into a Top

Recently, I delved into the topic of creating a responsive sidebar menu in Bootstrap 4. After exploring various solutions, I opted for an alternate version. Here's the HTML code snippet that I implemented: <div class="container-fluid"> < ...

htmlcsstwitter-bootstrapsidebar

Need help modifying a UseStatus to target an axios post response efficiently?

Hey there, back again with a head-scratcher I've been dealing with all day. Almost done with a contact form, just stuck on an animation concept that involves three steps: 1. Prompting the user to contact 2. Making the waiting process user-friendly ...

javascriptcssreactjsaxiosuse-state

What is the best way to recreate this grid-like design using CSS?

By utilizing clever techniques such as margins and outlines, I was able to design the following. If you'd like to take a look at the live website, it can be found at https://i.sstatic.net/kl0an.jpg The CSS code that I used is as follows: body { ma ...

htmlcssgridoutline

unable to toggle collapse functionality of bootstrap 3 navbar

My navbar was recently modified, but now the toggle button is not responding when clicked. Here is the code I am using. Can someone help me find the mistake? CODE: <body> <div class="navbar-wrapper"> <div class="container"> ...

jqueryhtmlcsstwitter-bootstrap

Enter the UL element and modify the LI class if it contains the .has_children class

Seeking assistance in navigating through a UL element to modify the LI and nested UL classes when .has_children is detected. Take a look at this example: <ul class="nav navbar-nav"> <li class="first current parent">Link1</li> < ...

javascriptjqueryhtml

Failed to load CSS and JS files

https://i.sstatic.net/tzp6n.png When attempting to launch my project on the server, I am facing issues with the CSS and JS files not loading properly. Below is the code snippet I have been using to include CSS/JS files: <script src="js/jquery.min.js" ...

javascriptcssspringmyeclipse

jQuery - Toggle between different behaviors when clicked

Issue I am attempting to switch between two functions when a button is clicked using jQuery's .toggle() method, but the button disappears as soon as the DOM is loaded. Script $(document).ready(function() { $("#panel").css({"height": "0%", "bo ...

jqueryhtmlanimation

What can be done to prevent divs from overlapping? They display properly on a computer browser, but not on mobile devices like phones or tablets

Recently, I took on the task of creating an eBay template for someone. With some assistance and a bit of trial and error, I managed to get it working, albeit with what I like to call "not-so-great" code. However, there is one issue that arises when viewing ...

androidjquerycsshtml

Utilizing PHP for file uploading and inserting the file path into a MySQL database

FileUpload.php: <?php //Directory to save uploaded images $targetDir = "img/"; $targetFilePath = $targetDir . basename($_FILES['uploadedFile']['name']); //Get form data $fileName = $_POST['uploadedFile']; $fileDescriptio ...

phphtmlmysqlweb

The vertical tab layout in HTML and CSS is experiencing an issue where the active tab is not being shown above the

Currently, I am developing a web page featuring vertical tabs where each tab corresponds to an image and some content. However, the problem lies in the fact that the active tab is not displaying above the image as expected. In my attempt to resolve this i ...

htmlcsswebbootstrap-4