jQM 1.4 input group

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page" id="page1">
     <div data-role="header">
        <h1>My page</h1> 
    </div> 	
    <div role="main" class="ui-content">

        <table id="specialContTbl"><tr>
            <td class="btntd">
                <button data-role="none" id="btn">B</button></td>
            <td class="inptd">
                <input data-role="none" type="text" id="inp1" name="inp1" value="" placeholder="enter some text" /></td>
        </tr></table>
        
                <div id="specialCont">
            <div>
                <button data-role="none" id="btn">B</button>
                <input data-role="none" type="text" id="inp1" name="inp1" value="" placeholder="enter some text" />
            </div>
        </div>

    </div> 

</div>

CSS

#specialContTbl {
    border-spacing: 0;
    border-collapse: collapsed;
}
#specialContTbl td {
    padding:0;
    margin: 0;
    border: 0;
    vertical-align: top;
}
#specialContTbl td:first-child{
    width: 60px;
}
#specialContTbl{
    width: 100%;
}
#specialContTbl button, #specialContTbl input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#specialContTbl button {
    font-weight: normal;
	background: #00f050;
	padding: 5px;
	color: #333;
	border: 1px solid #d4d4d4;
	border-right: 0;
	border-bottom-left-radius:1em;
	border-top-left-radius: 1em;	
	line-height: 28px;
    height: 38px;
	width: 100%;
	float: left;
	text-align: center;
	cursor: pointer;
    white-space:nowrap;
}
#specialContTbl input {
	width: 100%;
    height: 38px;
	padding: 8px;
	border: 1px solid #d4d4d4;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
	line-height: 18px;
	float: right;
    box-shadow: inset 0px 2px 2px #ececec;
}
#specialContTbl input:focus {
	outline: 0;
}


#specialCont {
	padding: 10px  4px;
	width: 100%;
	margin: 0 auto;
}
#specialCont div {
	overflow: hidden;
}
#specialCont button, #specialCont input {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#specialCont button {
	font-weight: normal;
	background: #00f050;
	padding: 5px;
	color: #333;
	border: 1px solid #d4d4d4;
	border-right: 0;
	border-bottom-left-radius:1em;
	border-top-left-radius: 1em;	
	line-height: 24px;
    height: 38px;
	width: 15%;
	float: left;
	text-align: center;
	cursor: pointer;
    white-space:nowrap;
}
#specialCont input {
	width: 85%;
	padding: 8px;
	border: 1px solid #d4d4d4;
	border-bottom-right-radius: 1em;
	border-top-right-radius: 1em;
	line-height: 18px;
    height: 38px;
	float: right;
    margin-top: 0px;
	box-shadow: inset 0px 2px 2px #ececec;
}
#specialCont input:focus {
	outline: 0;
}