JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="resumes">
			
				

<li class="resume_list" style="display: flow-root">
		
    
        <div class="resume-detalis">
            
            <div class="resume-title-col resume-column">
                <h5 class="job-offer-title"><a href="#">Kunegunda Wsteczna</a></h5>
            </div>   
			
			<div class="resume-location resume-column">
               <span class="locaction-resume">Wsteczna, Mongolia</span>
			</div>

			<ul class="meta-info resume-column">
                
            <li><span class="current-status-candidate szukam-pracy" style="white-space: nowrap;margin-right:6px;display:inline-block">I'm looking for a job</span> </li>

                <li class="resume-last-update">
                  <i>ost. akt.:</i> 1 min temu                </li>
            </ul>
        </div>
<div class="more-info" style="cursor:pointer"><span class="click-show-notes">Show more<i class="fas fa-arrow-down" style="margin-left: 8px"></i></span><span class="click-hide-notes" style="display:none">Show less<i class="fas fa-arrow-up" style="margin-left: 8px"></i></span></div>

    <div class="main-box-info" style="display:none;">
  
    <div class="main-box-info-tab">
      <table class="main-table-resume">
    <tbody>
		<tr>
			<td class="main-info-table-res dob">Date of birth</td>
			<td class="dob"><div class="icon-div"><i class="far fa-calendar-alt icon-in-table"></i></div>
			14.07.1981 (37 lat)			</td>
		</tr>
		<tr>
			<td class="main-info-table-res">Phone</td>
			<td><div class="icon-div"><i class="far fa-mobile-android-alt icon-in-table"></i></div>
			<a href="tel:0048596596321">0048596596321</a></td>
		</tr>
		
        <tr>
		<td class="main-info-table-res">Date of registration</td>
		<td style="white-space: nowrap"><div class="icon-div"><i class="far fa-at icon-in-table"></i></div>
		14.07.2018</td>
		</tr>
		
    </tbody>
</table></div>
    </div>
    </li>

			
				

<li class="resume_list" style="display: flow-root">
		
    
        <div...

CSS

.more-info{
  border-radius: 5px;
    border: 1px solid #ccc!important;
    color: #515151;
    background: #f6f6f6;
    width: fit-content;
    margin-right: auto!important;
    margin-top: 5px!important;
    position: relative;
    font-size: 15px;
    padding: 0 7px;
}

JavaScript

jQuery(document).ready(function($){
$(".more-info").click(function(){
$(this).closest('.resume_list').find('.main-box-info').slideToggle();
   $(this).closest('.more-info').find('span.click-show-notes, span.click-hide-notes').toggle();
});
});