JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap.css">
<link rel="stylesheet" href="http://cdn.thejameskyle.com/bootstrap-responsive.css">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3" style="text-align: center"><div class="well">
            <form class="vertical">
                <h5>Search</h5>
                <div class="input-adjust">
                    <div class="input-prepend">
                        <span class="add-on">Location</span>
                        <input type="text" placeholder="Boston, MA">
                    </div>
                </div>
                <div class="input-adjust">
                    <div class="input-prepend">
                        <span class="add-on">Sport</span>
                        <input type="text" placeholder="Basketball">
                    </div>
                </div>
                <hr class="dotted">
                <div class="input-adjust">
                    <div class="input-prepend">
                        <span class="add-on">First Name</span>
                        <input type="text" placeholder="Jordan">
                    </div>
                </div>
                <hr class="dotted">
                <select>
                    <option>Max Price</option>
                    <option>$50</option>
                    <option>$75</option>
                    <option>$100</option>
                    <option>$125</option>
                </select>
                <select>
                    <option>Max Distance</option>
                    <option>5mi</option>
                    <option>10mi</option>
                    <option>20mi</option>
                    <option>30mi</option>
                </select>
                <hr class="dotted">
                <button class="btn" type="submit">asdf</button>
            </form>
        </div></div>
        <div class="span9">
            <div class="well">
                <form>
      ...

SCSS

body {
    margin: 20px 0;
}
form.vertical {
    width: 100%;
    .input-adjust {
        margin-right: 14px;
    }
    input, button, select {
        width: 100%;
    }
    hr {
        margin-top: 13px;
        &.dotted {
            border-style: dotted;
        }
    }
}

[class|="input"] {
    display: table;
    width: 100%;
    .add-on {
        display: table-cell;
        width: 20%;
        min-width: 70px;
        max-width: 130px;
        text-align: right;
        &:first-child { border-right-width: 0; }
        &:last-child { border-left-width: 0; }
    }
    input, select {
        display: table-cell;
    }
    &::after {
       content: "";
       display: table-cell;
       clear: right;
       width: 7px;
    }
}
.input-prepend select {border-radius: 0 3px 3px 0}
.input-append  select {border-radius: 3px 0 0 3px}
.input-append.input-prepend select { border-radius: 0 !important }

@media (min-width: 768px) and (max-width: 1200px) {
    form.vertical {
        .input-adjust { width: 93%; margin: 0 auto; }
        .input-prepend input {border-radius: 0 0 3px 3px}
        .input-append  input {border-radius: 3px 3px 0 0}
        .input-append.input-prepend { input { border-radius: 0 } }
        [class|="input"] {
            margin-left: 0;
            .add-on {
                display: block;
                width: 100%;
                text-align: center;
                border-width: 1px !important;
                margin: 0;
                padding-right: 6px;
                padding-left:  6px;
                &:first-child { border-bottom-width: 0 !important; border-radius: 3px 3px 0 0;}
                &:last-child { border-top-width: 0; border-radius: 0 0 3px 3px;}
            }
            input {
                display: block;
                width: 100%;
            }
            &::after {
                content: none;
            }
        }
    }
}

@media (-webkit-min-device-pixel-ratio:0) {
    [class|="input"] select {
       ...