CSS Adjustment for Markdown Font on Mobile

Site URL: https://epumford.com

I'm having some trouble with the font spacing in my markdown on mobile devices.  Ideally, in the Honors & Awards section, I want to have the date with the event to the right of it, and on mobile have it wrap around without appearing directly below the date.  I do not want it to appear as it does here.

However, worst case-scenario, I would like to reduce the font size of the date on mobile.  When I re-define the font as h4 in CSS, it unfortunately puts the event on the line below instead of next to it.  This prevents me from implementing the @media only screen and (max-width: 640px) {h4 { font-size: 14px;} CSS. How can I prevent this, or is there any alternative to a Markdown that will let me have the date next to the event without stacking on mobile?

Markdown code:

<p><span style="font-family:Proxima-Nova; font-size:1.3em; color: black;">2020</span>  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;NSF GRFP Honorable Mention, NSF  <br>
<span style="font-family:Proxima-Nova; font-size:1.3em;color: black;">2019</span>        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Graduate Dean’s Scholar Award, Graduate Division, UCLA  <br>
<span style="font-family:Proxima-Nova; font-size:1.3em;color: black;">2019</span> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Undergraduate Research Scholar Designation, Office of Undergraduate Research  <br>
<span style="font-family:Proxima-Nova; font-size:1.3em;color: black;">2018</span>    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Travel Grant Award, Office of Undergraduate Research  <br>
<span style="font-family:Proxima-Nova; font-size:1.3em;color: black;">2018</span>    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;1st Place Poster, Bioengineering Symposium  <br>
<span style="font-family:Proxima-Nova; font-size:1.3em;color: black;">2018</span>    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Graduate Research Assistantship, Department of Bioengineering  <br>
<span style="font-family:Proxima-Nova; font-size:1.3em;color: black;">2015-18</span>    &nbsp; &nbsp; &nbsp;Dean’s List, University of Utah  <br>
<span style="font-family:Proxima-Nova; font-size:1.3em;color: black;">2017</span>    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Undergraduate Research Opportunity Program Award, 2x, University of Utah</p>
 

Hi. If you haven't solved the problem, please let me know. We will check carefully.

10 hours ago, tuanphan said:

Hi. If you haven't solved the problem, please let me know. We will check carefully.

Hi @tuanphan, I still have not been able to solve this.  I would greatly appreciate any help!