Title: CSS Alignment Issue
Last modified: April 10, 2024

---

# CSS Alignment Issue

 *  Resolved [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/)
 * Good Afternoon,
 * I wonder if someone is able to assist with a CSS issue I have please?
 * I am currently working on localhost only and even though I am using LocalWP v8.3.2
   +6660 to develop, it seems that it will not let me share a live link (GraphQL
   error).
 * Anyway, I am using a couple of snippets to get min reading time and to also show
   published date of post and Last Updated date of post (not one or the other). 
   These are both working just fine. The issue I am having is that when a post has
   been updated it (correctly shows) both the original published date as well as
   the last updated date which is what I want. However, I am struggling with the
   CSS to align these next to each other.
 * See below:
 * ![](https://i0.wp.com/i.postimg.cc/v861xP1L/1.png?ssl=1)
 * I would like the updated section to be to the right of the published part with
   a 1px grey line separating the two (EG: color: 333; border-right: 1px) as opposed
   to underneath it. I am thinking maybe display: inline-block; but I have hit a
   wall with this…
   Here is the code I currently have:
 *     ```wp-block-code
       // Calclate estimated reading time of Article/Post from number of words
       function reading_time() {
           global $post;
           $content = get_post_field( 'post_content', $post->ID );
           $word_count = str_word_count( strip_tags( $content ) );
           $readingtime = ceil($word_count / 183); // Change to edit reading speed (WPM). Slow=100, Ave=183, and fast=260
   
           if ($readingtime == 1) {
             $timer = " min"; // minute
           } else {
             $timer = " mins"; // minutes
           }
           $totalreadingtime = $readingtime . $timer;
   
           return $totalreadingtime;
       }
   
       // Show both Published date and Last Updated date for Posts/Articles
       add_filter( 'generate_post_date_output', function( $output, $time_string ) {
           $time_string = '<span class="label">Published: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
   
           if ( get_the_date() !== get_the_modified_date() ) {
               $time_string = '<span class="label">Published: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time><span class="label">Updated: </span><time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%4$s</time>';
           }
   
           $time_string = sprintf( $time_string,
               esc_attr( get_the_date( 'c' ) ),
               esc_html( get_the_date( 'jS F, Y' ) ), // Adjusted format for published date
               esc_attr( get_the_modified_date( 'c' ) ),
               esc_html( get_the_modified_date( 'jS F, Y' ) ) // Adjusted format for modified date
           );
   
           return sprintf( '<div class="posted-on">%s</div> ', $time_string );
       }, 10, 2 );
   
   
       // Generate author image and name with reading time
       add_filter( 'generate_post_author_output', function() {
           // Calculate reading time dynamically
           $reading_time = reading_time();
   
           // Output author information without the link
           return sprintf( '<div class="author vcard">%s</div><div class="author-wrap"><span>Written by <span class="author-name" itemprop="name">%s&nbsp;</span></span><span class="label" id="reading-time">Read Time: %s</span></div>',
                   get_avatar( get_the_author_meta( 'ID' ) ),
                   esc_html( get_the_author() ),
                   $reading_time
           );
       } );
   
       add_filter( 'generate_header_entry_meta_items', function() {
           return array(
               'author',
               'date',
           );
       } );
       ```
   
 * If you require any further information please let me know.
 * Thank you.

Viewing 6 replies - 31 through 36 (of 36 total)

[←](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/?output_format=md)
[1](https://wordpress.org/support/topic/css-alignment-issue-2/?output_format=md)
[2](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/?output_format=md)
3

 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/#post-17690871)
 * Fantastic! I wish I had half of your knowledge on these matters.
 * Phew I bet you are glad this thread is now resolved 😀
 * Thank you so very much for your time and especially your patience.
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/#post-17692991)
 * You’re welcome. Happy to be of help
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/#post-17693291)
 * You didn’t help, you went above and beyond and I truly appreciate it.
 * I (as well as countless others) are asking for custom design work for a free 
   product! Irrespective of this, the staff offer their talent and time to assist
   when they could well just go down the route of many others companies and deem
   such requests as out of scope.
 * You (and the other members of staff) have made a customer out of me that is for
   sure. As soon as I am able, I will be looking in to the pro versions of both 
   GeneratePress and GenerateBlocks.
 * Thank you again
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/#post-17693402)
 * Thank you for your kind words
   If you are happy to leave us a review, it would
   be well received:
 * [https://wordpress.org/support/theme/generatepress/reviews/](https://wordpress.org/support/theme/generatepress/reviews/)
 *  Thread Starter [Bri](https://wordpress.org/support/users/tinnyfusion/)
 * (@tinnyfusion)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/#post-17694157)
 * [Done](https://wordpress.org/support/topic/absolutely-superb-theme-with-exceptional-support/)
   🙂
 *  [David](https://wordpress.org/support/users/diggeddy/)
 * (@diggeddy)
 * [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/#post-17696160)
 * Thank you!

Viewing 6 replies - 31 through 36 (of 36 total)

[←](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/?output_format=md)
[1](https://wordpress.org/support/topic/css-alignment-issue-2/?output_format=md)
[2](https://wordpress.org/support/topic/css-alignment-issue-2/page/2/?output_format=md)
3

The topic ‘CSS Alignment Issue’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/generatepress/3.6.1/screenshot.
   png)
 * GeneratePress
 * [Support Threads](https://wordpress.org/support/theme/generatepress/)
 * [Active Topics](https://wordpress.org/support/theme/generatepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/generatepress/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/generatepress/reviews/)

## Tags

 * [alignment](https://wordpress.org/support/topic-tag/alignment/)
 * [css](https://wordpress.org/support/topic-tag/css/)

 * 36 replies
 * 2 participants
 * Last reply from: [David](https://wordpress.org/support/users/diggeddy/)
 * Last activity: [2 years, 1 month ago](https://wordpress.org/support/topic/css-alignment-issue-2/page/3/#post-17696160)
 * Status: resolved