JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<style type="text/css">
<!--
#slide-wrap {
margin:0 auto;
overflow: auto;
background:#BCC5E1;
border:1px solid #000;
}
#inner-wrap {
float:left;
margin-right:-30000px;/*Be safe with Opera's limited negative margin of 32695px (-999em could cause problems with large font sizes)*/
padding-left:20px;
}
fieldset{
margin: 10px;
padding: 10px;
border: 1px solid #D0D0D0;
}
label{
float: left;
width: 120px;
font-weight: bold;
}
div.horizontal-fields input,
div.horizontal-fields textarea,
div.horizontal-fields select,
div.horizontal-fields label {
float: left;
width: auto;
}
div.horizontal-fields button {
width: auto;
margin: 0;
}
/* Horizontal fields is the class which is not re-sizing it's with correctly */
.horizontal-fields {
display: inline-block;
width: 300%;
}
.service-item {
clear: left;
}
input, textarea{
float: left;
width: 180px;
margin-bottom: 5px;
margin-right: 10px;
}
textarea{
width: 250px;
height: 150px;
}
select {
margin-bottom: 5px;
margin-right: 10px;
}
button{
margin-left: 120px;
margin-top: 5px;
width: 90px;
}
-->
</style>
</head>
<body>
<fieldset>
<legend>Fourth: Add Services</legend>
<div id="slide-wrap">
<div id="inner-wrap">
<div style="display: inline-block;" class="horizontal-fields service-item">
<button class="horizontal-fields remove-service-item" style="float: left; margin-right: 5px;">-</button>
<label for="service_name">Name:</label>
<input name="service_name[]" id="service_name" value="" type="text">
<label for="service_description">Description:</label>
<input id="service_description" name="service_description[]" value="" type="text">
...