Summary Block Title, Excerpt, Metadata on One Line

Hey! I'm about to start working on a site where I want to creatively use the list summary block. Instead of the title, excerpt, and metadata being stacked on top of one another, I wanted to see if it would be possible to get these on the same line horizontally. 

I tried messing with top and left margins for .summary-content, .summary-excerpt, etc. and it was really sloppy and obviously didn't work for different screen sizes. 

I've attached an image that gives an idea of what I'm trying to do. Thank you in advance if anyone can help me figure this out!

Can you share link to page where you use summary block? We can check easier.

I think I actually figured it out using this code:

.summary-excerpt{
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-column-gap: 5px !important;
    grid-row-gap: 5px !important;
   position: static !important;
}

.summary-content {
 height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-column-gap: 5px !important;
    grid-row-gap: 5px !important;
    position: static !important;
}

If this looks sloppy or you have other suggestions, I am all ears! I currently just have a test site up to play with this. 

https://testknowling.squarespace.com/

password: view