This is a bit of an odd one… but I love to show examples of how simple CSS can meet your needs, however different they may be, for SharePoint and SharePoint web parts.  A student needed to convert the Project Summary web part countdown box to a single line above the rest of the web part content.  The following CSS can make this happen.

Project Summary Countdown

Here is how the Project Summary count down (task X due in X days) looks by default:

My student wanted it moved above the web part.  Here is the result:

Here is the CSS to accomplish this task:

/* =SharePoint Experts, Inc. - CSS for converting the Project Summary countdown box to a single line above the web part content. SharePoint 2013. 
-sharepointexperience.com
*/


/* ---- Project Summary Web Part ---- */

/* Add space for countdown line between web part title and web part content */
	div[id^="OuterPanel"] {
		margin-top: 30px;
	}

/* Move countdown area to above web part contents */
	div[id$="CountDown"] {
		position: absolute;
		top: -30px; /* Match or closely mirror margin-top value above */
		width: 100%;
		border-right: 0; 
	}

/* Remove default margin for countdown and main content area */
	.ms-psum-headlines-area {
		margin-left: 0 !important;  /* !important needed to override inline SharePoint style */
	}
	.ms-psum-countdown-contents {
		margin: 0;
	}

/* Collapse countdown text components into one line */
	.ms-psum-heading-task-text,
	.ms-psum-heading-text{
		float: left;
		width: auto;
		line-height: 1.5em;  /* Required to create consistent vertical spacing */
	}

/* Add to sides of center text to create the look of character spaces */
	.ms-psum-heading-text {
		padding: 0 5px;
	}

/* Adjust formatting of actual countdown to match rest of text */
	.ms-psum-countdown-number {
		font-size: 1.5em;  /* Match OOTB SharePoint font size for rest of countdown text */
		line-height: 1.5;   /* Required to create consistent vertical spacing */
	}


/* 
SharePoint Experts, Inc. 
sharepointexperience.com
*/

The niftier bit of this code snippet is the use of attribute selectors (lines 9 and 14) to target a couple of DIVs that have some hairy looking IDs. By using an attribute selector we can create a simpler CSS selector and stay away from things like this:

#OuterPanel_ctl00_ctl39_g_6785cfab_4428_4818_909a_ee39d0563e77  {
	margin-top: 30px;
}

I don’t know about you, but once an ID hits 61 characters, it gives me the heebie jeebies. No human created that ID and I don’t trust auto generated IDs to remain consistent as I move from SharePoint site to SharePoint site or from environment to environment.