Is it possible to group a set of html elements so that they move together?

Question

When the browser size is changed/on different sized devices, I need a set of html elements that are all semantically related to remain together and move in a block. That is, if one of the elements move to the next "row" due to their not being enough width to contain the whole grouping, ALL of it should move down.

IOW, this is sort of like the "keep together" attribute that some groupings of items in a word processing document have.

To be a little more specific, say that I have collections of the following elements:

1) an anchor tag, filling out a first "column"
2) a collection of tags, to the right of the anchor tag, consisting of:
(a) a div, followed by a <br/>
(b) a cite, followed by a <br/>
(c) another div, followed by a <br/>
(d) two or three anchor tags that are aligned side-by-side at the bottom of the second "column"

So to sum up, if there is not enough room for the second "column" in a "row," rather than keep the in the first "column" and moving the elements in the second column down to the next "row," the in the first column should adhere to its siblings and always remain on the same "row" with them (I'm putting "row" and "column" in quotes because I'm not using an html table, and those exist only in a virtual sense).

If you're finding this a little hard to visualize (I don't blame you), check out the fiddle: http://jsfiddle.net/W7CYC/8/

Note: wrapping the groupings into html5 s did not help.

Here's the code:

HTML:

<div class="yearBanner">2013</div>
<section>
<a id="mainImage" class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/0299186342" rel="nofollow noreferrer"><img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"></a>

    <div id="prizeCategory" class="category">BIOGRAPHY</div>
    <br/>
<cite id="prizeTitle" class="title">Son of the Wilderness: The Life of John Muir</cite>

    <br/>
    <div id="prizeArtist" class="author">Linnie Marsh Wolfe</div>
    <br/>
    <img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
    <img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
    <img class="floatLeft" height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
</section>
<section>
<a class="floatLeft" href="https://rads.stackoverflow.com/amzn/click/com/0299186342" rel="nofollow noreferrer"><img height="240" width="160" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg"></a>

    <div class="category">BIOGRAPHY</div>
    <br/>
<cite class="title">Son of the Wilderness: The Life of John Muir</cite>

    <br/>
    <div class="author">Linnie Marsh Wolfe</div>
    <br/>
    <img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
    <img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
    <img height="60" width="40" src="http://ecx.images-amazon.com/images/I/51usxIl4vML._SY346_.jpg">
</section>

CSS:

body {
    background-color: black;
}
.floatLeft {
    float: left;
    padding-right: 20px;
    padding-left: 5px;
}
.yearBanner {
    font-size: 3em;
    color: white;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    float: left;
    padding-top: 64px;
}
.category {
    display: inline-block;
    font-family: Consolas, sans-serif;
    font-size: 2em;
    color: Orange;
    width: 160px;
}
.title {
    display: inline-block;
    font-family: Calibri, Candara, serif;
    color: Yellow;
    width: 160px;
}
.author {
    display: inline-block;
    font-family: Courier, sans-serif;
    font-size: 0.8em;
    color: White;
    width: 160px;
}

jQuery:

$('#prizeCategory').text("Changed Category");
$('#prizeTitle').text("Changed Title that spans two rows");
$('#prizeArtist').text("Changed Author and co-author");
$('#mainImage img').attr("src", "http://ecx.images-amazon.com/images/I/61l0rZz6mdL._SY300_.jpg");
$('#mainImage img').attr("height", "200");

Answer 1

You group items simply with div (or if you want to use section, it is okay too). With a little hint of CSS you can group item inside wrapper. Unfortunately, there is no such attribute than keep together but you can do following:

section.wrapper {
  min-width: 400px; /* Minimum width of your wrapper element */
  overflow: hidden;
  display: inline-block;
}

min-width helps you to keep elements inside wrapper in order. Select a value that best suits your situation.
overflow with value hidden lets your wrapper to understand and add width and height values of floated elements inside.
display with value inline-block let all of wrappers to order next to each other as long as there is enough space, if not, wrapper jumps to other row.

http://www.w3schools.com/ serves great sources to understand and learn CSS, HTML and web technologies in generally. Very useful.

EDIT
As I edited, min-width or width suits better in that situation than max-width