怎么让两个块级元素保持在一行

我这里是要做这样的效果的

首先我想到是用行内元素(使用span和i)，哈哈哈，然后那个橙色的小点点又要有宽高，所以只能给定义成inline-block，其实使用什么属性的元素都没关系，但具体是怎么样无论页面宽度怎么变化，他们都能保持在一行。

<i class="orange_spot"></i>
<span class="spot_next_airticle">我基金和秦我基金和秦我基金和秦我基金和秦天补助系今天收到了之情生命</span>

.orange_spot{
				display: inline-block;
				width: 10px;
				height: 10px;
				background-color:#FF6E08 ;
				border-radius: 100%;
				//注意，我这是设置小点点与右侧文字的距离，使用百分比能够很好地
				//控制，页面变小后面文字会被挤下去的问题，这个百分比的设置方法
				//是，间隔距离/父盒子的大小
				margin-right:4%;
				box-shadow: 1px 1px 4px #FDCE8C;
			}
.spot_next_airticle{
				width: 90%;
				display: inline-block;
				font-size: 14px;
				color: #545454;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				float: right;
			}
/* 清除浮动代码，就是在后面插一个非浮动的盒子元素 */
			.spot_next_airticle:after{
				display: block;
				clear: both;
				content: "";
				visibility: hidden;
				height: 0;
			}

总结，主要是之适应页面的需求是就是到达在各种显示器上都适应，有些值不能固定死了。