responsive positioning of elements within a HTML tile - html

Question

I am building a tiled web page which resizes the position of the tiles to the screen size. At the moment it all works well with a title and image centered in each tile.
i would like to add an input box but would like to position this and other elements with in the tile. i can do this with absolute positioning but when resizing the screen the input box does not move with the tile. How can I go about doing this.
body {
text-align: center;
background-color: #000000;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
#media only screen and (min-width: 600px) {
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
.DTile {
border: 2px solid blue;
background-color: #808080;
height: 200px;
}
.DGauge {
font-size: 350%;
color: #0000CD;
}
.DTitle {
color: #0000CD;
font-size: 150%;
}
.DsetTemp {
position: absolute;
left: 150px;
top: 150px;
}
.NTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.NGauge {
font-size: 350%
}
.Ntitle {
color: #0000CD;
font-size: 150%;
}
.FTile {
border: 2px solid yellow;
background-color: #808080;
height: 200px;
}
.FGauge {
font-size: 350%
}
.FTitle {
color: #0000CD;
font-size: 150%;
}
.HTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.HGauge {
font-size: 350%
}
.HTitle {
color: #0000CD;
font-size: 150%;
}
<div class="row">
<div class="col-3">
<div class="DTile">
<p class="DTitle"> The Den</p>
<div class="DGauge" id="Dtemp"></div>
<img src="" id="Dicon" width="80px" height="30px" vspace="10">
<input class="DsetTemp" type="text" id="DsetTemp" value="" size="2">
</div>
</div>
<div class="col-3">
<div class="FTile">
<p class="FTitle"> Front room</p>
<div class="FGauge" id="Ftemp"></div>
<img src="" id="Ficon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="HTile">
<p class="HTitle"> Hallway</p>
<div class="HGauge" id="Htemp"></div>
<img src="" id="Hicon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="NTile">
<p class="NTitle"> Niamh Room</p>
<div class="NGauge" id="Ntemp"></div>
<img src="" id="Nicon" width="80px" height="30px" vspace="10">
</div>
</div>
</div>
ive added a Jpeg image of my actual page. The Front room tile has three elements positioned side by side. This is what i am trying to create

Answer 1

Check Flexbox documentation
$(document).ready(function() {
$("#btn").click(function() {
$("#Create").toggle();
});
});
body {
text-align: center;
background-color: #000000;
}
* {
box-sizing: border-box;
}
[class*="col-"] {
float: left;
padding: 5px;
}
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
#media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}
#media only screen and (min-width: 600px) {
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
.DTile {
border: 2px solid blue;
background-color: #808080;
height: 200px;
}
.DGauge {
font-size: 350%;
color: #0000CD;
}
.DTitle {
color: #0000CD;
font-size: 150%;
}
.DsetTemp {
width: 80%;
}
.NTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.NGauge {
font-size: 350%
}
.Ntitle {
color: #0000CD;
font-size: 150%;
}
.FTile {
border: 2px solid yellow;
background-color: #808080;
height: 200px;
}
.FGauge {
font-size: 350%;
}
.DRandom {
display: flex;
flex-direction: column;
width: 80%;
margin: auto;
}
.DRandom-1 {
flex: 1;
margin: auto;
border: 1px solid red;
}
.DRandom-2 {
flex: 1;
display: flex;
justify-content: space-between;
border: 1px solid red;
margin: auto;
/* width:100% */
}
.DRandom-2 button {
/* flex:1; */
/* width:20%; */
}
.DRandom-2 input {
flex: 1;
}
.FTitle {
color: #0000CD;
font-size: 150%;
}
.HTile {
border: 2px solid #7CFC00;
background-color: #808080;
height: 200px;
}
.HGauge {
font-size: 350%
}
.HTitle {
color: #0000CD;
font-size: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="testStyles.css">
</head>
<body>
<div class="row">
<div class="col-3">
<div class="DTile">
<p class="DTitle"> The Den</p>
<div class="DGauge" id="Dtemp"></div>
<div class="DRandom">
<div class="DRandom-1">
<img src="" id="Dicon" width="80px" height="30px" vspace="10">
</div>
<div class="DRandom-2">
<button id="btn">
Button
</button>
<input id="Create" class="DsetTemp" type="text" id="DsetTemp" value="" />
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="FTile">
<p class="FTitle"> Front room</p>
<div class="FGauge" id="Ftemp"></div>
<img src="" id="Ficon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="HTile">
<p class="HTitle"> Hallway</p>
<div class="HGauge" id="Htemp"></div>
<img src="" id="Hicon" width="80px" height="30px" vspace="10">
</div>
</div>
<div class="col-3">
<div class="NTile">
<p class="NTitle"> Niamh Room</p>
<div class="NGauge" id="Ntemp"></div>
<img src="" id="Nicon" width="80px" height="30px" vspace="10">
</div>
</div>
</div>
</body>
</html>