JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lines">
			<div class="tab1_unvisible"><input class="ch" type="checkbox"></div>
			<div class="tab2">Tesla Model S (2015)</div>
			<div class="tab3">11</div>
			<div class="tab4">$120 000</div>
		</div>

CSS

.lines{
	width: 100%;
	padding: 10px 0 10px 0;
	background-color: #FFFFFF;
	overflow: hidden;
	font-weight: 500;
	font-size: 17px;
}

.lines:hover{
	background-color: #F5F5F5;
	cursor: pointer;
}

.tab1_unvisible{
	float: left;
	width: 10%;
	padding: 8px 0 8px 0;
	text-align: center;
}

.tab2{
	float: left;
	width: 64%;
	padding: 8px 2% 8px 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tab3{
	float: left;
	width: 9%;
	padding: 8px 0 8px 0;
}

.tab4{
	float: left;
	width: 15%;
	padding: 8px 0 8px 0;
}

JavaScript

$(".lines").click(function(){
			if  ($(this).find(".ch").is(":checked")){
		              $(".ch").removeAttr("checked");
		        }
		        else{
		              $(".ch").attr("checked","checked");
		       }
	    	});