JSFiddle - React, Tailwind, and code Playground

by Christian Rouhault

HTML

<div class="test-line">
              <div class="test-field">Propriété4
              </div>
              <div class="test-value">
                <div class="test-value-wording">Placez ici le contenu de  class "test-value-wording"</div>
                <div class="test-value-note">
                  <div class="test-value-plus">Les +</div>
                  <div class="test-value-minus">Les -</div>
                </div>
              </div>
            </div>

CSS

.test-line {
	position: relative;
	display: inline-block;
	border: 1px solid #000000;
	width: 700px;
	
}

.test-field {
	position: relative;
	float: left;
	width: 200px;
	padding-left: 8px;
	color: #FFFFFF;
	background-color: #000000;
}

.test-value {
	position: relative;
	float: left;
	border-left: 1px solid #000000;
	width: 491px;
	
}

.test-value-wording {
	border-bottom: 1px solid #000000;
	padding-left: 8px;
	
}

.test-value-note {
	position: relative;
	
}

.test-value-plus {
	float: left;
	position: relative;
	width: 245px;
	border-right: 1px solid #000000;
	padding-left: 8px;
	
}

.test-value-minus {
	position: relative;
	float: left;
	padding-left: 8px;
	
}