JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
      <div class="column">
				<div class="field">
					<div class="field_left"></div>
					<div class="field_middle" contenteditable="true"></div>
					<div class="field_right"></div>
				</div>
			</div>
      <div class="column">
				<div class="field">
					<div class="field_left"></div>
					<div class="field_middle" contenteditable="true"></div>
					<div class="field_right"></div>
				</div>
			</div>
      <div class="column">
				<div class="field">
					<div class="field_left"></div>
					<div class="field_middle" contenteditable="true"></div>
					<div class="field_right"></div>
				</div>
			</div>
      <div class="column">
				<div class="field">
					<div class="field_left"></div>
					<div class="field_middle" contenteditable="true"></div>
					<div class="field_right"></div>
				</div>
			</div>
      <div class="column">
				<div class="field">
					<div class="field_left"></div>
					<div class="field_middle" contenteditable="true"></div>
					<div class="field_right"></div>
				</div>
			</div>
		</div>

CSS

.container
			{
				width: calc(100% - 34px);
				height:185px;
				margin-left:17px;
				margin-top:17px;
				display:flex;
			}
			
			.column{
				flex:1;
				height:186px;
				margin-right:1.75%;
			}	
			
			.column:nth-child(5){
				margin-right:0px;
			}
			
			.field{
				margin-bottom:5px;
				display:flex;
				width:100%;
			}			
			
			.field_left{
				width:6px;
				height:24px;
				background:green;
			}
			
			.field_middle{
				height:24px;
				background:red;
				width:calc(100% - 13px);
			}
			
			.field_right{
				width:7px;
				height:24px;
				background:blue;
			}
				
			[contenteditable]
			{
				display:inline;
				white-space: nowrap;
				overflow:hidden;
				text-overflow: inherit;
			   -webkit-user-select: auto;
				       user-select:  auto;
				  -moz-user-select: -moz-text;
    		}