Data, title and read time

I am trying to get Ghost's style on my GP blog. I want my post list to look like: https://edition.ghost.io/tag/startup/

I somewhat managed it: https://angelcosta.com.br/

But the css it weird in small devices. Here is my code:

add_action( 'generate_before_entry_title', function() {
        echo '<div class="entry-meta">';
            generate_do_post_meta_item( 'date' );
        echo '</div>';
} );

add_action( 'generate_after_entry_title', function() {
        echo '<div class="entry-meta tempo-leitura">';
        echo  tu_estimated_reading_time();
        echo '</div>';
} );

function tu_estimated_reading_time() {

	$post = get_post();
	$conteudo = strip_tags( strip_shortcodes( $post->post_content ) );
	$words = str_word_count( $conteudo );
	$minutes = ceil( $words / 200 );
	if ($minutes < 2) {
		$estimated_time = '1 min';
	}
	else {
		$estimated_time = $minutes . ' min';
	}
	return $estimated_time;

}

And my css:

.inside-article {border-bottom:1px solid #eee; padding:0; vertical-align:middle;line-height: 1.0; height:40px; margin-bottom:10px }
.entry-meta, .entry-title {display:inline-block; }
.entry-meta {margin-right:15px; color:#AC1406}
@media (max-width:768px)  { 

}
.tempo-leitura {display:inline-block; float:right; color:#ccc}

h1.entry-title {
	text-align:center;
}