Как добавить текст слева от первого tab-а

$(".tab_content").hide(); 
    $(".tab_content:first").show(); 
 
    $("ul.tabs li").click(function() { 
		 
      $(".tab_content").hide(); 
      var activeTab = $(this).attr("rel");  
      $("#"+activeTab).fadeIn();		 
		 
      $("ul.tabs li").removeClass("active"); 
      $(this).addClass("active"); 
 
	  $(".tab_drawer_heading").removeClass("d_active"); 
	  $(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active"); 
	   
    }); 
 
	$(".tab_drawer_heading").click(function() { 
       
      $(".tab_content").hide(); 
      var d_activeTab = $(this).attr("rel");  
      $("#"+d_activeTab).fadeIn(); 
	   
	  $(".tab_drawer_heading").removeClass("d_active"); 
      $(this).addClass("d_active"); 
	   
	  $("ul.tabs li").removeClass("active"); 
	  $("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active"); 
    });

ul.tabs { 
	margin: 0; 
	padding: 0; 
	float: left; 
	list-style: none; 
	height: 32px; 
	border-bottom: 1px solid #cdd0d2; 
  border-top: 1px solid #cdd0d2; 
  border-left: 1px solid #cdd0d2; 
	width: 10.%; 
} 
 
ul.tabs li { 
	float: left; 
	margin: 0; 
	cursor: pointer; 
	padding: 0px 21px; 
	height: 31px; 
	line-height: 31px; 
	background-color: transparent; 
	color: #697379; 
	overflow: hidden; 
	position: relative; 
} 
 
.tab_last { border-right: 1px solid #333; } 
 
ul.tabs li:hover { 
	background-color: #ccc; 
	color: #333; 
} 
 
ul.tabs li.active { 
	border-bottom-color:#37454d; 
	border-bottom: 2px solid #333; 
	display: block; 
} 
 
.tab_container { 
	border: 1px solid #333; 
	border-top: none; 
	clear: both; 
	float: left; 
	width: 100%; 
	background: #fff; 
	overflow: auto; 
} 
 
.tab_content { 
	padding: 20px; 
	display: none; 
} 
 
.tab_drawer_heading { display: none; } 
 
@media screen and (max-width: 480px) { 
	.tabs { 
		display: none; 
	} 
	.tab_drawer_heading { 
		background-color: #ccc; 
		color: #fff; 
		border-top: 1px solid #333; 
		margin: 0; 
		padding: 5px 20px; 
		display: block; 
		cursor: pointer; 
		-webkit-touch-callout: none; 
		-webkit-user-select: none; 
		-khtml-user-select: none; 
		-moz-user-select: none; 
		-ms-user-select: none; 
		user-select: none; 
	} 
	.d_active { 
		background-color: #666; 
		color: #fff; 
	} 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="tabs"> 
  <li class="active" rel="tab1">Наши рекомендации</li> 
  <li rel="tab2">Расстояние от центра города</li> 
  <li rel="tab3">Оценка по отзывам</li> 
  <li rel="tab4">Самая низкая цена</li> 
</ul> 
<div class="tab_container"> 
   
  <h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3> 
   
  <div id="tab1" class="tab_content"> 
  <h2>Tab 1 content</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p> 
  </div> 
  <!-- #tab1 --> 
  <h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3> 
  <div id="tab2" class="tab_content"> 
     
  <h2>Tab 2 content</h2> 
    <p>Nunc dui velit, scelerisque eu placerat volutpat, dapibus eu nisi. Vivamus eleifend vestibulum odio non vulputate.</p> 
  </div> 
  <!-- #tab2 --> 
 
  <h3 class="tab_drawer_heading" rel="tab3">Tab 3</h3> 
  <div id="tab3" class="tab_content"> 
  <h2>Tab 3 content</h2> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac metus augue.</p> 
  </div> 
 <!-- #tab3--> 
 
    
<!-- .tab_container --> 
</div>